aldehyde 0.2.512 → 0.2.514

package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-controller.ts

@@ -1,64 +1,64 @@
-export interface UpdateOptions {
-    reRender: boolean;
-}
-
-/**
- * 设计器自定义组件控制器的顶级抽象接口，用于控制自定义组件的整个生命周期
- * @param I 组件实例类型，若组件为React的class组件，则I=class的实例化对象。
- * 若组件为React的函数式组件，则I=forwardRef钩子传递出的ref引用（当然你也可以有其他自定义的实现）
- * 若组件为纯Js实现的组件，则I=组件实例化对象（可参考Echarts活G2创建实例后的返回值）
- * @param C 组件配置类型，即组件的完整属性类型
- */
-abstract class AbstractController<I = any, C = any> {
-
-    /**
-     * 组件实例引用
-     * @protected
-     */
-    protected instance: I | null = null;
-    /**
-     * 组件配置(包括组件数据)
-     * @protected
-     */
-    public config: C | null = null;
-    /**
-     * 组件所处容器的dom元素
-     * @protected
-     */
-    public container: HTMLElement | null = null;
-
-    /******************生命周期******************/
-
-    /**
-     * 创建组件并将组件挂载到指定的容器中
-     * @param container 容器
-     * @param config 组件配置
-     */
-    public abstract create(container: HTMLElement, config: C): Promise<void>;
-
-    /**
-     * 更新组件配置，并触发组件重新渲染
-     * @param config 组件属性（参数）
-     * @param upOp 操作类型
-     */
-    public abstract update(config: C, upOp?: UpdateOptions): void;
-
-    /**
-     * 销毁组件
-     */
-    public destroy(): void {
-        this.instance = null;
-        this.config = null;
-        this.container = null;
-    }
-
-
-    /******************普通方法******************/
-    /**
-     * 获取组件配置数据
-     */
-    public abstract getConfig(): C | null;
-
-}
-
-export default AbstractController;
+export interface UpdateOptions {
+    reRender: boolean;
+}
+
+/**
+ * 设计器自定义组件控制器的顶级抽象接口，用于控制自定义组件的整个生命周期
+ * @param I 组件实例类型，若组件为React的class组件，则I=class的实例化对象。
+ * 若组件为React的函数式组件，则I=forwardRef钩子传递出的ref引用（当然你也可以有其他自定义的实现）
+ * 若组件为纯Js实现的组件，则I=组件实例化对象（可参考Echarts活G2创建实例后的返回值）
+ * @param C 组件配置类型，即组件的完整属性类型
+ */
+abstract class AbstractController<I = any, C = any> {
+
+    /**
+     * 组件实例引用
+     * @protected
+     */
+    protected instance: I | null = null;
+    /**
+     * 组件配置(包括组件数据)
+     * @protected
+     */
+    public config: C | null = null;
+    /**
+     * 组件所处容器的dom元素
+     * @protected
+     */
+    public container: HTMLElement | null = null;
+
+    /******************生命周期******************/
+
+    /**
+     * 创建组件并将组件挂载到指定的容器中
+     * @param container 容器
+     * @param config 组件配置
+     */
+    public abstract create(container: HTMLElement, config: C): Promise<void>;
+
+    /**
+     * 更新组件配置，并触发组件重新渲染
+     * @param config 组件属性（参数）
+     * @param upOp 操作类型
+     */
+    public abstract update(config: C, upOp?: UpdateOptions): void;
+
+    /**
+     * 销毁组件
+     */
+    public destroy(): void {
+        this.instance = null;
+        this.config = null;
+        this.container = null;
+    }
+
+
+    /******************普通方法******************/
+    /**
+     * 获取组件配置数据
+     */
+    public abstract getConfig(): C | null;
+
+}
+
+export default AbstractController;

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

@@ -1,77 +1,77 @@
-import AbstractController from "./abstract-controller";
-import React, { ComponentType } from "react";
-import ComponentController from "./component-controller";
-
-export type ClazzTemplate<C> = new () => C | null;
-
-export interface ActionInfo {
-    name: string;
-    id: string;
-    handler: (controller: ComponentController, params?: any) => void;
-}
-
-export interface ICategorize {
-    key: string;
-    name: string;
-    icon?: ComponentType;
-    parentKey?: string;
-    iconType?: string;
-}
-
-/**
- * 组件基础信息
- */
-export interface BaseInfoType {
-    /**
-     * 组件显示名称
-     */
-    compName: string;
-    /**
-     * 组件标识
-     */
-    compKey: string;
-    /**
-     * 主分类
-     */
-    categorize?: string;
-    /**
-     * 子分类
-     */
-    subCategorize?: string;
-    /**
-     * 版本
-     */
-    version?: string;
-    /**
-     * 初始宽度
-     */
-    width?: number;
-    /**
-     * 初始高度
-     */
-    height?: number;
-}
-
-/**
- * 自动扫描抽象组件定义核心类。
- * 对于所有继承并实现了该抽象类的子类，都会被自动扫描到并注册到设计器中。
- * 因此，所有要接入设计器的react组件都应该按照该类的约定实现其所有的方法。
- *
- * 泛型说明：
- * C: 组件控制器类，用于指定当前组件定义对应的控制器类
- * P: 组件配置类型，用于指定当前组件的配置数据(config属性的类型)
- */
-export abstract class AbstractDefinition<C extends AbstractController = AbstractController, P = any> {
-
-    /**
-     * 返回组件基础信息，用于在组件列表中展示
-     */
-    abstract getBaseInfo(): BaseInfoType;
-
-    /**
-     * 返回React组件Controller控制器的类模板，在画布中创建组件实例时会根据该方法的返回值实例化组件控制器并保存。
-     * 后续将通过该控制器的实例对象来控制组件的生命周期
-     */
-    abstract getController(): ClazzTemplate<C> | null;
-}
-
+import AbstractController from "./abstract-controller";
+import React, { ComponentType } from "react";
+import ComponentController from "./component-controller";
+
+export type ClazzTemplate<C> = new () => C | null;
+
+export interface ActionInfo {
+    name: string;
+    id: string;
+    handler: (controller: ComponentController, params?: any) => void;
+}
+
+export interface ICategorize {
+    key: string;
+    name: string;
+    icon?: ComponentType;
+    parentKey?: string;
+    iconType?: string;
+}
+
+/**
+ * 组件基础信息
+ */
+export interface BaseInfoType {
+    /**
+     * 组件显示名称
+     */
+    compName: string;
+    /**
+     * 组件标识
+     */
+    compKey: string;
+    /**
+     * 主分类
+     */
+    categorize?: string;
+    /**
+     * 子分类
+     */
+    subCategorize?: string;
+    /**
+     * 版本
+     */
+    version?: string;
+    /**
+     * 初始宽度
+     */
+    width?: number;
+    /**
+     * 初始高度
+     */
+    height?: number;
+}
+
+/**
+ * 自动扫描抽象组件定义核心类。
+ * 对于所有继承并实现了该抽象类的子类，都会被自动扫描到并注册到设计器中。
+ * 因此，所有要接入设计器的react组件都应该按照该类的约定实现其所有的方法。
+ *
+ * 泛型说明：
+ * C: 组件控制器类，用于指定当前组件定义对应的控制器类
+ * P: 组件配置类型，用于指定当前组件的配置数据(config属性的类型)
+ */
+export abstract class AbstractDefinition<C extends AbstractController = AbstractController, P = any> {
+
+    /**
+     * 返回组件基础信息，用于在组件列表中展示
+     */
+    abstract getBaseInfo(): BaseInfoType;
+
+    /**
+     * 返回React组件Controller控制器的类模板，在画布中创建组件实例时会根据该方法的返回值实例化组件控制器并保存。
+     * 后续将通过该控制器的实例对象来控制组件的生命周期
+     */
+    abstract getController(): ClazzTemplate<C> | null;
+}
+

package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-designer-loader.ts

@@ -1,37 +1,37 @@
-import { AbstractDefinition } from "./abstract-definition";
-import { compsConfig } from "./assets";
-import ComponentDefinition from "./component-definition";
-import GroupDefinition from "./group-layer/definition";
-
-class AbstractDesignerLoader {
-
-    //自定义组件信息映射
-    public definitionMap: Record<string, AbstractDefinition> = {};
-
-    /**
-     * 加载设计器
-     */
-    public load(): void {
-        //扫描组件
-        this.scanComponents();
-    }
-
-    /**
-     * 组件挂载
-     */
-    protected scanComponents(): void {
-        Object.keys(compsConfig || {}).forEach((key) => {
-            const definition: AbstractDefinition = new ComponentDefinition({ componentType: key, componentNode: compsConfig[key].componentNode });
-            const compKey = definition.getBaseInfo()?.compKey;
-            if (compKey) {
-                this.definitionMap[compKey] = definition;
-            }
-        });
-        // 编组组件信息挂载
-        this.definitionMap["group"] = new GroupDefinition();
-    }
-
-}
-
-const abstractDesignerLoader = new AbstractDesignerLoader();
+import { AbstractDefinition } from "./abstract-definition";
+import { compsConfig } from "./assets";
+import ComponentDefinition from "./component-definition";
+import GroupDefinition from "./group-layer/definition";
+
+class AbstractDesignerLoader {
+
+    //自定义组件信息映射
+    public definitionMap: Record<string, AbstractDefinition> = {};
+
+    /**
+     * 加载设计器
+     */
+    public load(): void {
+        //扫描组件
+        this.scanComponents();
+    }
+
+    /**
+     * 组件挂载
+     */
+    protected scanComponents(): void {
+        Object.keys(compsConfig || {}).forEach((key) => {
+            const definition: AbstractDefinition = new ComponentDefinition({ componentType: key, componentNode: compsConfig[key].componentNode });
+            const compKey = definition.getBaseInfo()?.compKey;
+            if (compKey) {
+                this.definitionMap[compKey] = definition;
+            }
+        });
+        // 编组组件信息挂载
+        this.definitionMap["group"] = new GroupDefinition();
+    }
+
+}
+
+const abstractDesignerLoader = new AbstractDesignerLoader();
 export default abstractDesignerLoader;

package/src/aldehyde/lowcode-components/lowcode-view/component/component-container.tsx

@@ -1,145 +1,145 @@
-import React, { memo, Suspense, useEffect, useRef, useState, useContext, useMemo } from "react";
-import Loading from "./loading";
-import { ILayerItem, LayerManagerDataType } from "../interface";
-import ComponentController from "./component-controller";
-import abstractDesignerLoader from "./abstract-designer-loader";
-import { useNavigate } from "react-router-dom";
-import { ControllerContext } from "../index";
-
-/** 静态 style，避免每次 render 重新创建对象 */
-const BASE_OUTER_STYLE: React.CSSProperties = {
-    position: 'absolute',
-    transformOrigin: 'center',
-};
-
-const BASE_INNER_STYLE: React.CSSProperties = {
-    width: '100%',
-    height: '100%',
-    transformOrigin: 'center',
-    position: 'relative',
-};
-
-/**
- * 根据 layer 数据统一计算外层 2D transform 与内层 3D transform。
- * 外层只承载 translate/2D-rotate（供 moveable 操作），内层承载 rotateX/Y/Z。
- * 职责分离，避免 moveable 将 3D 值写入 layer.transform 导致重复叠加。
- */
-const resolveTransforms = (
-    layer: ILayerItem,
-): { outerTransform: string; innerTransform?: string; has3D: boolean; perspective?: number } => {
-    const { rotateX, rotateY, rotateZ, perspective } = layer.transform3D || {};
-    const has3D = !!(rotateX || rotateY || rotateZ); // 是否存在3D转换
-    const baseTransform = layer.transform || `translate(${layer.x}px, ${layer.y}px)`;
-    // --- 外层 2D transform ---
-    let outerTransform: string;
-    if (has3D) {
-        // 仅提取 translate + 2D rotate，剥离可能混入的 3D 部分
-        const translateMatch = baseTransform.match(/translate\([^)]+\)/);
-        const translate = translateMatch ? translateMatch[0] : `translate(${layer.x}px, ${layer.y}px)`;
-        const rotateMatch = baseTransform.match(/\brotate\([^)]+\)/);
-        outerTransform = rotateMatch ? `${translate} ${rotateMatch[0]}` : translate;
-    } else {
-        outerTransform = baseTransform;
-    }
-    // --- 内层 3D transform ---
-    let innerTransform: string | undefined;
-    if (has3D) {
-        const parts: string[] = [];
-        if (rotateX) parts.push(`rotateX(${rotateX}deg)`);
-        if (rotateY) parts.push(`rotateY(${rotateY}deg)`);
-        if (rotateZ) parts.push(`rotateZ(${rotateZ}deg)`);
-        innerTransform = parts.join(' ');
-    }
-    return { outerTransform, innerTransform, has3D, perspective };
-};
-
-const registerProxy = (compId: string, controller: ComponentController) => {
-    controller.changeData = new Proxy(controller.changeData, {
-        apply(target, thisArg, argus) {
-            return target.apply(thisArg, argus as any);
-        }
-    });
-}
-
-export interface ComponentContainerProps {
-    layer: ILayerItem;
-    layerManager: LayerManagerDataType;
-}
-
-const ComponentContainer = memo((props: ComponentContainerProps) => {
-    const { layer, layerManager } = props;
-    const ref = useRef(null);
-    const [compController, setCompController] = useState<{ [key: string]: ComponentController }>({});
-    const navigate = useNavigate();
-    const { setControllers, setSearchParams } = useContext(ControllerContext);
-
-    useEffect(() => {
-        //通过ref创建组件，并将组件实例存入Map中。后续通过Map匹配到具体实例，调用实例的对象方法进行组件的更新操作
-        const { elemConfigs } = layerManager;
-        const componentDefine = abstractDesignerLoader.definitionMap[layer.type];
-        const Controller = componentDefine?.getController() as any;
-        if (Controller) {
-            let config;
-            if (layer.id! in compController!) {
-                //重新编组后，被编组组件会重新渲染，需从之前的实例中获取原有数据
-                config = compController![layer.id!].getConfig();
-            } else if (layer.id! in elemConfigs!) {
-                config = elemConfigs![layer.id!];
-            }
-            /**
-             * 此处注意，执行顺序尤为重要！！！
-             * 第一步：动态代理绑定在前，
-             * 第二步：赋值controller在后，
-             * 第三步：最后才是执行create方法。
-             */
-            //todo 此处逻辑应该使用设计模式优化，而非写死
-            registerProxy(layer.id!, Controller);
-            setCompController(val => ({ ...val, [layer.id]: Controller }));
-            Controller.create(ref.current!, { ...config, navigate, setSearchParams }).then(() => {
-                //设置组件滤镜效果（todo 考虑是否应该在此处设置？）
-                Controller.updateFilter(Controller.getConfig()?.filter);
-                //存储Controller，用于后续操作(初始化更新数据)
-                setControllers(val => ({ ...val, [layer.id]: Controller }));
-            });
-        }
-        return () => {
-            Controller.destroy();
-            setControllers(val => ({ ...val, [layer.id]: null }));
-        }
-    }, []);
-
-    const { outerTransform, innerTransform, has3D, perspective } = useMemo(
-        () => resolveTransforms(layer),
-        [layer.transform, layer.x, layer.y, layer.transform3D],
-    );
-
-    return (
-        <Suspense fallback={<Loading />}>
-            <div
-                id={layer.id}
-                data-type={layer.type}
-                data-lock={layer.lock}
-                data-hide={layer.hide}
-                key={layer.id + ''}
-                style={{
-                    ...BASE_OUTER_STYLE,
-                    width: layer.width,
-                    height: layer.height,
-                    transform: outerTransform,
-                    perspective: (has3D && perspective) ? `${perspective}px` : undefined,
-                    transformStyle: has3D ? 'preserve-3d' : undefined,
-                    visibility: layer.hide ? 'hidden' : 'visible',
-                    border: 'none'
-                }} className={"lc-comp-item"}>
-                <div ref={ref} style={{
-                    ...BASE_INNER_STYLE,
-                    transform: innerTransform,
-                    pointerEvents: 'auto',
-                }} />
-            </div>
-        </Suspense>
-    )
-});
-
-
+import React, { memo, Suspense, useEffect, useRef, useState, useContext, useMemo } from "react";
+import Loading from "./loading";
+import { ILayerItem, LayerManagerDataType } from "../interface";
+import ComponentController from "./component-controller";
+import abstractDesignerLoader from "./abstract-designer-loader";
+import { useNavigate } from "react-router-dom";
+import { ControllerContext } from "../index";
+
+/** 静态 style，避免每次 render 重新创建对象 */
+const BASE_OUTER_STYLE: React.CSSProperties = {
+    position: 'absolute',
+    transformOrigin: 'center',
+};
+
+const BASE_INNER_STYLE: React.CSSProperties = {
+    width: '100%',
+    height: '100%',
+    transformOrigin: 'center',
+    position: 'relative',
+};
+
+/**
+ * 根据 layer 数据统一计算外层 2D transform 与内层 3D transform。
+ * 外层只承载 translate/2D-rotate（供 moveable 操作），内层承载 rotateX/Y/Z。
+ * 职责分离，避免 moveable 将 3D 值写入 layer.transform 导致重复叠加。
+ */
+const resolveTransforms = (
+    layer: ILayerItem,
+): { outerTransform: string; innerTransform?: string; has3D: boolean; perspective?: number } => {
+    const { rotateX, rotateY, rotateZ, perspective } = layer.transform3D || {};
+    const has3D = !!(rotateX || rotateY || rotateZ); // 是否存在3D转换
+    const baseTransform = layer.transform || `translate(${layer.x}px, ${layer.y}px)`;
+    // --- 外层 2D transform ---
+    let outerTransform: string;
+    if (has3D) {
+        // 仅提取 translate + 2D rotate，剥离可能混入的 3D 部分
+        const translateMatch = baseTransform.match(/translate\([^)]+\)/);
+        const translate = translateMatch ? translateMatch[0] : `translate(${layer.x}px, ${layer.y}px)`;
+        const rotateMatch = baseTransform.match(/\brotate\([^)]+\)/);
+        outerTransform = rotateMatch ? `${translate} ${rotateMatch[0]}` : translate;
+    } else {
+        outerTransform = baseTransform;
+    }
+    // --- 内层 3D transform ---
+    let innerTransform: string | undefined;
+    if (has3D) {
+        const parts: string[] = [];
+        if (rotateX) parts.push(`rotateX(${rotateX}deg)`);
+        if (rotateY) parts.push(`rotateY(${rotateY}deg)`);
+        if (rotateZ) parts.push(`rotateZ(${rotateZ}deg)`);
+        innerTransform = parts.join(' ');
+    }
+    return { outerTransform, innerTransform, has3D, perspective };
+};
+
+const registerProxy = (compId: string, controller: ComponentController) => {
+    controller.changeData = new Proxy(controller.changeData, {
+        apply(target, thisArg, argus) {
+            return target.apply(thisArg, argus as any);
+        }
+    });
+}
+
+export interface ComponentContainerProps {
+    layer: ILayerItem;
+    layerManager: LayerManagerDataType;
+}
+
+const ComponentContainer = memo((props: ComponentContainerProps) => {
+    const { layer, layerManager } = props;
+    const ref = useRef(null);
+    const [compController, setCompController] = useState<{ [key: string]: ComponentController }>({});
+    const navigate = useNavigate();
+    const { setControllers, setSearchParams } = useContext(ControllerContext);
+
+    useEffect(() => {
+        //通过ref创建组件，并将组件实例存入Map中。后续通过Map匹配到具体实例，调用实例的对象方法进行组件的更新操作
+        const { elemConfigs } = layerManager;
+        const componentDefine = abstractDesignerLoader.definitionMap[layer.type];
+        const Controller = componentDefine?.getController() as any;
+        if (Controller) {
+            let config;
+            if (layer.id! in compController!) {
+                //重新编组后，被编组组件会重新渲染，需从之前的实例中获取原有数据
+                config = compController![layer.id!].getConfig();
+            } else if (layer.id! in elemConfigs!) {
+                config = elemConfigs![layer.id!];
+            }
+            /**
+             * 此处注意，执行顺序尤为重要！！！
+             * 第一步：动态代理绑定在前，
+             * 第二步：赋值controller在后，
+             * 第三步：最后才是执行create方法。
+             */
+            //todo 此处逻辑应该使用设计模式优化，而非写死
+            registerProxy(layer.id!, Controller);
+            setCompController(val => ({ ...val, [layer.id]: Controller }));
+            Controller.create(ref.current!, { ...config, navigate, setSearchParams }).then(() => {
+                //设置组件滤镜效果（todo 考虑是否应该在此处设置？）
+                Controller.updateFilter(Controller.getConfig()?.filter);
+                //存储Controller，用于后续操作(初始化更新数据)
+                setControllers(val => ({ ...val, [layer.id]: Controller }));
+            });
+        }
+        return () => {
+            Controller.destroy();
+            setControllers(val => ({ ...val, [layer.id]: null }));
+        }
+    }, []);
+
+    const { outerTransform, innerTransform, has3D, perspective } = useMemo(
+        () => resolveTransforms(layer),
+        [layer.transform, layer.x, layer.y, layer.transform3D],
+    );
+
+    return (
+        <Suspense fallback={<Loading />}>
+            <div
+                id={layer.id}
+                data-type={layer.type}
+                data-lock={layer.lock}
+                data-hide={layer.hide}
+                key={layer.id + ''}
+                style={{
+                    ...BASE_OUTER_STYLE,
+                    width: layer.width,
+                    height: layer.height,
+                    transform: outerTransform,
+                    perspective: (has3D && perspective) ? `${perspective}px` : undefined,
+                    transformStyle: has3D ? 'preserve-3d' : undefined,
+                    visibility: layer.hide ? 'hidden' : 'visible',
+                    border: 'none'
+                }} className={"lc-comp-item"}>
+                <div ref={ref} style={{
+                    ...BASE_INNER_STYLE,
+                    transform: innerTransform,
+                    pointerEvents: 'auto',
+                }} />
+            </div>
+        </Suspense>
+    )
+});
+
+
 export default ComponentContainer;