aldehyde 0.2.503 → 0.2.504

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;

package/src/aldehyde/lowcode-components/lowcode-view/component/font/FontGlobal.css

@@ -1,27 +1,27 @@
-@font-face {
-    font-family: "DingTalk JinBuTi";
-    src: url('./DingTalk-JinBuTi.woff2');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "DouyinSansBold";
-    src: url('./DouyinSansBold.woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "优设标题黑";
-    src: url('./YouSheBiaoTiHei.woff2');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "庞门正道标题体免费版";
-    src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan.woff2');
-    font-weight: normal;
-    font-style: normal;
+@font-face {
+    font-family: "DingTalk JinBuTi";
+    src: url('./DingTalk-JinBuTi.woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "DouyinSansBold";
+    src: url('./DouyinSansBold.woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "优设标题黑";
+    src: url('./YouSheBiaoTiHei.woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "庞门正道标题体免费版";
+    src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan.woff2');
+    font-weight: normal;
+    font-style: normal;
 }

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

@@ -1,37 +1,37 @@
-import { ComponentInfoType } from "../../interface";
-import GroupLayer from "./index";
-import AbstractDesignerController from "../abstract-controller";
-
-export interface GroupLayerProps {
-    base: ComponentInfoType;
-}
-
-export default class GroupLayerController extends AbstractDesignerController<GroupLayer, GroupLayerProps> {
-
-    constructor(container: HTMLElement, config: GroupLayerProps, instance: GroupLayer) {
-        super();
-        this.container = container;
-        this.config = config;
-        this.instance = instance;
-    }
-
-    async create(container: HTMLElement, config: GroupLayerProps): Promise<void> {
-    }
-
-    public getConfig(): GroupLayerProps | null {
-        return this.config;
-    }
-
-    public update(): void {
-    }
-
-    public show(): void {
-        this.instance?.setState({ load: true })
-    }
-
-    public hide(): void {
-        this.instance?.setState({ load: false })
-    }
-
-
+import { ComponentInfoType } from "../../interface";
+import GroupLayer from "./index";
+import AbstractDesignerController from "../abstract-controller";
+
+export interface GroupLayerProps {
+    base: ComponentInfoType;
+}
+
+export default class GroupLayerController extends AbstractDesignerController<GroupLayer, GroupLayerProps> {
+
+    constructor(container: HTMLElement, config: GroupLayerProps, instance: GroupLayer) {
+        super();
+        this.container = container;
+        this.config = config;
+        this.instance = instance;
+    }
+
+    async create(container: HTMLElement, config: GroupLayerProps): Promise<void> {
+    }
+
+    public getConfig(): GroupLayerProps | null {
+        return this.config;
+    }
+
+    public update(): void {
+    }
+
+    public show(): void {
+        this.instance?.setState({ load: true })
+    }
+
+    public hide(): void {
+        this.instance?.setState({ load: false })
+    }
+
+
 }