aldehyde 0.2.501 → 0.2.503

package/src/aldehyde/lowcode-components/data-number/index.less

@@ -1,11 +1,11 @@
-.data-number-component {
-  --stroke-color: #000000;
-  --stroke-width: 0;
-
-  height: 100%;
-  display: flex;
-  -webkit-text-stroke-color: var(--stroke-color);
-  -webkit-text-stroke-width: var(--stroke-width);
-  stroke-color: var(--stroke-color);
-  stroke-width: var(--stroke-width);
+.data-number-component {
+  --stroke-color: #000000;
+  --stroke-width: 0;
+
+  height: 100%;
+  display: flex;
+  -webkit-text-stroke-color: var(--stroke-color);
+  -webkit-text-stroke-width: var(--stroke-width);
+  stroke-color: var(--stroke-color);
+  stroke-width: var(--stroke-width);
 }

package/src/aldehyde/lowcode-components/date-time/index.less

@@ -1,5 +1,5 @@
-.date-time-component {
-  width: 100%;
-  height: 100%;
-  display: flex;
+.date-time-component {
+  width: 100%;
+  height: 100%;
+  display: flex;
 }

package/src/aldehyde/lowcode-components/date-time/index.tsx

@@ -1,65 +1,65 @@
-import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import dayjs from "dayjs";
-import './index.less';
-
-export interface DateTimeComponentStyle {
-    fontSize?: number;
-    color?: string;
-    fontFamily?: string;
-    fontWeight?: number;
-    alignItems?: string;
-    justifyContent?: string;
-    letterSpacing?: string;
-    formatType?: string;
-}
-
-export interface DateTimeComponentProps {
-    style?: DateTimeComponentStyle;
-}
-
-export interface DateTimeComponentRef {
-    updateConfig: (newConfig: DateTimeComponentProps) => void;
-    setEventHandler: (eventMap: Record<string, Function>) => void;
-    destroy: () => void;
-}
-
-const defFormatType = "YYYY年MM月DD日 HH时mm分ss秒";
-
-const DateTimeComponent = forwardRef((props: DateTimeComponentProps, ref: ForwardedRef<DateTimeComponentRef>) => {
-    const [config, setConfig] = useState<DateTimeComponentProps>({ ...props });
-    const [datetime, setDateTime] = useState<string>(dayjs().format(config.style?.formatType || defFormatType));
-    const timeRef = useRef<NodeJS.Timeout | null>(null);
-    const eventHandlerMap = useRef<Record<string, Function>>({});
-
-    const handleClearInterval = () => {
-        timeRef.current && clearInterval(timeRef.current);
-        timeRef.current = null;
-    }
-
-    useEffect(() => {
-        timeRef.current = setInterval(() => {
-            setDateTime(dayjs().format(config.style?.formatType || defFormatType));
-        }, 1000);
-        return () => {
-            handleClearInterval();
-        }
-    }, []);
-
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => setConfig({ ...newConfig }),
-        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
-        destroy: () => {
-            handleClearInterval();
-        }
-    }));
-
-
-    return (
-        <div className="date-time-component" style={{ ...(config?.style || {}) }}>
-            {datetime}
-        </div>
-    );
-});
-
+import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import dayjs from "dayjs";
+import './index.less';
+
+export interface DateTimeComponentStyle {
+    fontSize?: number;
+    color?: string;
+    fontFamily?: string;
+    fontWeight?: number;
+    alignItems?: string;
+    justifyContent?: string;
+    letterSpacing?: string;
+    formatType?: string;
+}
+
+export interface DateTimeComponentProps {
+    style?: DateTimeComponentStyle;
+}
+
+export interface DateTimeComponentRef {
+    updateConfig: (newConfig: DateTimeComponentProps) => void;
+    setEventHandler: (eventMap: Record<string, Function>) => void;
+    destroy: () => void;
+}
+
+const defFormatType = "YYYY年MM月DD日 HH时mm分ss秒";
+
+const DateTimeComponent = forwardRef((props: DateTimeComponentProps, ref: ForwardedRef<DateTimeComponentRef>) => {
+    const [config, setConfig] = useState<DateTimeComponentProps>({ ...props });
+    const [datetime, setDateTime] = useState<string>(dayjs().format(config.style?.formatType || defFormatType));
+    const timeRef = useRef<NodeJS.Timeout | null>(null);
+    const eventHandlerMap = useRef<Record<string, Function>>({});
+
+    const handleClearInterval = () => {
+        timeRef.current && clearInterval(timeRef.current);
+        timeRef.current = null;
+    }
+
+    useEffect(() => {
+        timeRef.current = setInterval(() => {
+            setDateTime(dayjs().format(config.style?.formatType || defFormatType));
+        }, 1000);
+        return () => {
+            handleClearInterval();
+        }
+    }, []);
+
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => setConfig({ ...newConfig }),
+        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
+        destroy: () => {
+            handleClearInterval();
+        }
+    }));
+
+
+    return (
+        <div className="date-time-component" style={{ ...(config?.style || {}) }}>
+            {datetime}
+        </div>
+    );
+});
+
 export default DateTimeComponent;

package/src/aldehyde/lowcode-components/four-angle-glow-border/index.less

@@ -1,50 +1,50 @@
-.four-angle-glow {
-  --fagb-color: #00ebff;
-  --fagb-width: 2px;
-  --fagb-length: 8px;
-  --fagb-radius: 3px;
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .angle {
-    position: absolute;
-    border: var(--fagb-width) solid var(--fagb-color);
-    width: var(--fagb-length);
-    height: var(--fagb-length);
-  }
-
-  .angle-tl {
-    margin: -1px 0 0 -1px;
-    border-right: 0;
-    border-bottom: 0;
-    border-top-left-radius: var(--fagb-radius);
-  }
-
-  .angle-tr {
-    top: 0;
-    right: 0;
-    border-left: 0;
-    border-bottom: 0;
-    margin: -1px -1px 0 0;
-    border-top-right-radius: var(--fagb-radius);
-  }
-
-  .angle-bl {
-    bottom: 0;
-    left: 0;
-    border-top: 0;
-    border-right: 0;
-    margin: 0 0 -1px -1px;
-    border-bottom-left-radius: var(--fagb-radius);
-  }
-
-  .angle-br {
-    bottom: 0;
-    right: 0;
-    border-left: 0;
-    border-top: 0;
-    margin: 0 -1px -1px 0;
-    border-bottom-right-radius: var(--fagb-radius);
-  }
+.four-angle-glow {
+  --fagb-color: #00ebff;
+  --fagb-width: 2px;
+  --fagb-length: 8px;
+  --fagb-radius: 3px;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .angle {
+    position: absolute;
+    border: var(--fagb-width) solid var(--fagb-color);
+    width: var(--fagb-length);
+    height: var(--fagb-length);
+  }
+
+  .angle-tl {
+    margin: -1px 0 0 -1px;
+    border-right: 0;
+    border-bottom: 0;
+    border-top-left-radius: var(--fagb-radius);
+  }
+
+  .angle-tr {
+    top: 0;
+    right: 0;
+    border-left: 0;
+    border-bottom: 0;
+    margin: -1px -1px 0 0;
+    border-top-right-radius: var(--fagb-radius);
+  }
+
+  .angle-bl {
+    bottom: 0;
+    left: 0;
+    border-top: 0;
+    border-right: 0;
+    margin: 0 0 -1px -1px;
+    border-bottom-left-radius: var(--fagb-radius);
+  }
+
+  .angle-br {
+    bottom: 0;
+    right: 0;
+    border-left: 0;
+    border-top: 0;
+    margin: 0 -1px -1px 0;
+    border-bottom-right-radius: var(--fagb-radius);
+  }
 }

package/src/aldehyde/lowcode-components/four-angle-glow-border/index.tsx

@@ -1,53 +1,53 @@
-import './index.less';
-import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
-
-export interface FourAngleGlowBorderStyle {
-    width?: number;
-    length?: number;
-    color?: string;
-    radius?: number;
-}
-
-export interface FourAngleGlowProps {
-    style?: FourAngleGlowBorderStyle;
-}
-
-export interface FourAngleGlowBorderRef {
-    updateConfig: (config: FourAngleGlowProps) => void;
-}
-
-const FourAngleGlowBorder = forwardRef((props: FourAngleGlowProps, ref: ForwardedRef<FourAngleGlowBorderRef>) => {
-    const [config] = useState<FourAngleGlowProps>({ ...props });
-    const fourAngleGlowRef = useRef<HTMLDivElement | null>(null);
-
-    const updateStyle = (style: FourAngleGlowBorderStyle) => {
-        const dom = fourAngleGlowRef.current;
-        if (dom) {
-            dom.style.setProperty('--fagb-length', `${style?.length}px`);
-            dom.style.setProperty('--fagb-color', style?.color);
-            dom.style.setProperty('--fagb-radius', `${style?.radius}px`);
-            dom.style.setProperty('--fagb-width', `${style?.width}px`);
-        }
-    };
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => updateStyle({ ...newConfig.style }),
-    }));
-
-    useEffect(() => {
-        updateStyle(config.style);
-    }, []);
-
-    return (
-        <div className="four-angle-glow" ref={fourAngleGlowRef}>
-            <span className="angle angle-tl" />
-            <span className="angle angle-tr" />
-            <span className="angle angle-bl" />
-            <span className="angle angle-br" />
-        </div>
-    );
-})
-
-export default FourAngleGlowBorder;
-
-
+import './index.less';
+import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+
+export interface FourAngleGlowBorderStyle {
+    width?: number;
+    length?: number;
+    color?: string;
+    radius?: number;
+}
+
+export interface FourAngleGlowProps {
+    style?: FourAngleGlowBorderStyle;
+}
+
+export interface FourAngleGlowBorderRef {
+    updateConfig: (config: FourAngleGlowProps) => void;
+}
+
+const FourAngleGlowBorder = forwardRef((props: FourAngleGlowProps, ref: ForwardedRef<FourAngleGlowBorderRef>) => {
+    const [config] = useState<FourAngleGlowProps>({ ...props });
+    const fourAngleGlowRef = useRef<HTMLDivElement | null>(null);
+
+    const updateStyle = (style: FourAngleGlowBorderStyle) => {
+        const dom = fourAngleGlowRef.current;
+        if (dom) {
+            dom.style.setProperty('--fagb-length', `${style?.length}px`);
+            dom.style.setProperty('--fagb-color', style?.color);
+            dom.style.setProperty('--fagb-radius', `${style?.radius}px`);
+            dom.style.setProperty('--fagb-width', `${style?.width}px`);
+        }
+    };
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => updateStyle({ ...newConfig.style }),
+    }));
+
+    useEffect(() => {
+        updateStyle(config.style);
+    }, []);
+
+    return (
+        <div className="four-angle-glow" ref={fourAngleGlowRef}>
+            <span className="angle angle-tl" />
+            <span className="angle angle-tr" />
+            <span className="angle angle-bl" />
+            <span className="angle angle-br" />
+        </div>
+    );
+})
+
+export default FourAngleGlowBorder;
+
+

package/src/aldehyde/lowcode-components/line-bar-chart/index.tsx

@@ -262,7 +262,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         const temData = isDesignMode && !data?.length ? option.series : data;
         option.barMaxWidth = barMaxWidth;
         option.grid = grid;
-        option.legend = { ...legend, ...legends[legend?.position], data: temData?.filter((item: any) => !item.isMarkLine).map((r: any) => r.name) };
+        option.legend = { ...legend, ...legends[legend?.position], data: temData?.filter((item: any) => !item.isMarkLine && item.name).map((r: any) => r.name) };
         option.tooltip = { trigger: "axis", ...tooltip };
         option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show } };
         option.yAxis = { ...option.yAxis, ...yAxis };

package/src/aldehyde/lowcode-components/line-chart/index.tsx

@@ -273,7 +273,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         // 编辑态无数据显示默认数据
         const temData = isDesignMode && !data?.length ? option.series : data;
         option.grid = grid;
-        option.legend = { ...legend, ...legends[legend?.position], data: temData?.filter((item: any) => !item.isMarkLine).map((r: any) => r.name) };
+        option.legend = { ...legend, ...legends[legend?.position], data: temData?.filter((item: any) => !item.isMarkLine && item.name).map((r: any) => r.name) };
         option.tooltip = { trigger: "axis", ...tooltip };
         option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show } };
         option.yAxis = { ...option.yAxis, ...yAxis };

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;
+}
+