aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/lowcode-components/decoration/decoration11/index.tsx

@@ -1,134 +1,134 @@
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo } from "react";
-import "./index.less";
-
-const segment = 30;
-const sectorAngle = Math.PI / 3;
-const ringNum = 3;
-const ringWidth = 1;
-
-const getCircleRadianPoint = (x, y, radius, radian) => [x + Math.cos(radian) * radius, y + Math.sin(radian) * radius];
-
-interface ComponentStyle {
-    mainColor?: string;
-    subColor?: string;
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    base?: { width?: number, height?: number, id: string }
-}
-
-export interface ComponentRef {
-    updateConfig: (config: ComponentProps) => void;
-}
-const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const { style: defStyle, base: defBase } = props;
-    const gId = `decoration-11-g-${defBase.id}`;
-    const gradientId = `decoration-11-gradient-${defBase.id}`;
-    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
-    const [width, setWidth] = useState<number>(defBase?.width || 200);
-    const [height, setHeight] = useState<number>(defBase?.height || 200);
-    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            setStyle({ ...newConfig.style });
-            setWidth(newConfig.base.width);
-            setHeight(newConfig.base.height);
-        },
-    }));
-
-    const { x, y } = useMemo(() => ({ x: width / 2, y: height / 2 }), [width, height]);
-
-    const pathD = useMemo(() => {
-        const startAngle = -Math.PI / 2;
-        const angleGap = sectorAngle / segment;
-        const r = width / 4;
-        let lastEndPoints = getCircleRadianPoint(x, y, r, startAngle);
-        return new Array(segment)
-            .fill('')
-            .map((_, i) => {
-                const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5));
-                const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`;
-                lastEndPoints = endPoints;
-                return d;
-            });
-    }, [x, y]);
-
-    const circleR = useMemo(() => {
-        const radiusGap = (width / 2 - ringWidth / 2) / ringNum;
-        return new Array(ringNum).fill(0).map((_, i) => radiusGap * (i + 1));
-    }, [width]);
-
-    const splitLinePoints = useMemo(() => {
-        const angleGap = Math.PI / 6;
-        const r = width / 2;
-        return new Array(6).fill('').map((_, i) => {
-            const startAngle = angleGap * (i + 1);
-            const endAngle = startAngle + Math.PI;
-            const startPoint = getCircleRadianPoint(x, y, r, startAngle);
-            const endPoint = getCircleRadianPoint(x, y, r, endAngle);
-            return `${startPoint.join(',')} ${endPoint.join(',')}`;
-        });
-    }, [x, y]);
-
-    const arcD = useMemo(() => {
-        const angleGap = Math.PI / 6;
-        const r = width / 2 - 1;
-        return new Array(4).fill('').map((_, i) => {
-            const startAngle = angleGap * (3 * i + 1);
-            const endAngle = startAngle + angleGap;
-            const startPoint = getCircleRadianPoint(x, y, r, startAngle);
-            const endPoint = getCircleRadianPoint(x, y, r, endAngle);
-            return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`;
-        });
-    }, [x, y]);
-
-    return <div className="decoration-11"  >
-        <svg width={width} height={height}>
-            <defs>
-                <g id={gId}>
-                    {pathD.map((d, i) => <path stroke={mainColor} strokeOpacity={(100 - i * 100 / (segment - 1)) / 100} strokeWidth={width / 2} fill='transparent' key={d} d={d} />)}
-                </g>
-                <radialGradient
-                    id={gradientId}
-                    cx='50%' cy='50%' r='50%'
-                >
-                    <stop offset='0%' stopColor='transparent' stopOpacity='1' />
-                    <stop offset='100%' stopColor={subColor} stopOpacity={0.3} />
-                </radialGradient>
-            </defs>
-            {circleR.map(r => <circle key={r} r={r} cx={x} cy={y} stroke={subColor} strokeWidth={0.5} fill='transparent' />)}
-            <circle r='1' cx={x} cy={y} stroke='transparent' fill={`url(#${gradientId})`}            >
-                <animate attributeName='r' values={`1;${width / 2}`} dur="2s" repeatCount='indefinite' />
-                <animate attributeName='opacity' values='1;0' dur="2s" repeatCount='indefinite' />
-            </circle>
-            <circle r='2' cx={x} cy={y} fill={subColor} />
-            {splitLinePoints.map(p => <polyline
-                key={p}
-                points={p}
-                stroke={subColor}
-                strokeWidth={0.5}
-                opacity='0.5'
-            />)}
-            {arcD.map(d => <path
-                key={d}
-                d={d}
-                stroke={subColor}
-                strokeWidth='2'
-                fill='transparent'
-            />)}
-            <use href={`#${gId}`}>
-                <animateTransform
-                    attributeName='transform'
-                    type='rotate'
-                    values={`0, ${x} ${y};360, ${x} ${y}`}
-                    dur="3s"
-                    repeatCount='indefinite'
-                />
-            </use>
-        </svg>
-    </div>;
-});
-
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo } from "react";
+import "./index.less";
+
+const segment = 30;
+const sectorAngle = Math.PI / 3;
+const ringNum = 3;
+const ringWidth = 1;
+
+const getCircleRadianPoint = (x, y, radius, radian) => [x + Math.cos(radian) * radius, y + Math.sin(radian) * radius];
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number, id: string }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style: defStyle, base: defBase } = props;
+    const gId = `decoration-11-g-${defBase.id}`;
+    const gradientId = `decoration-11-gradient-${defBase.id}`;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 200);
+    const [height, setHeight] = useState<number>(defBase?.height || 200);
+    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setStyle({ ...newConfig.style });
+            setWidth(newConfig.base.width);
+            setHeight(newConfig.base.height);
+        },
+    }));
+
+    const { x, y } = useMemo(() => ({ x: width / 2, y: height / 2 }), [width, height]);
+
+    const pathD = useMemo(() => {
+        const startAngle = -Math.PI / 2;
+        const angleGap = sectorAngle / segment;
+        const r = width / 4;
+        let lastEndPoints = getCircleRadianPoint(x, y, r, startAngle);
+        return new Array(segment)
+            .fill('')
+            .map((_, i) => {
+                const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5));
+                const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`;
+                lastEndPoints = endPoints;
+                return d;
+            });
+    }, [x, y]);
+
+    const circleR = useMemo(() => {
+        const radiusGap = (width / 2 - ringWidth / 2) / ringNum;
+        return new Array(ringNum).fill(0).map((_, i) => radiusGap * (i + 1));
+    }, [width]);
+
+    const splitLinePoints = useMemo(() => {
+        const angleGap = Math.PI / 6;
+        const r = width / 2;
+        return new Array(6).fill('').map((_, i) => {
+            const startAngle = angleGap * (i + 1);
+            const endAngle = startAngle + Math.PI;
+            const startPoint = getCircleRadianPoint(x, y, r, startAngle);
+            const endPoint = getCircleRadianPoint(x, y, r, endAngle);
+            return `${startPoint.join(',')} ${endPoint.join(',')}`;
+        });
+    }, [x, y]);
+
+    const arcD = useMemo(() => {
+        const angleGap = Math.PI / 6;
+        const r = width / 2 - 1;
+        return new Array(4).fill('').map((_, i) => {
+            const startAngle = angleGap * (3 * i + 1);
+            const endAngle = startAngle + angleGap;
+            const startPoint = getCircleRadianPoint(x, y, r, startAngle);
+            const endPoint = getCircleRadianPoint(x, y, r, endAngle);
+            return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`;
+        });
+    }, [x, y]);
+
+    return <div className="decoration-11"  >
+        <svg width={width} height={height}>
+            <defs>
+                <g id={gId}>
+                    {pathD.map((d, i) => <path stroke={mainColor} strokeOpacity={(100 - i * 100 / (segment - 1)) / 100} strokeWidth={width / 2} fill='transparent' key={d} d={d} />)}
+                </g>
+                <radialGradient
+                    id={gradientId}
+                    cx='50%' cy='50%' r='50%'
+                >
+                    <stop offset='0%' stopColor='transparent' stopOpacity='1' />
+                    <stop offset='100%' stopColor={subColor} stopOpacity={0.3} />
+                </radialGradient>
+            </defs>
+            {circleR.map(r => <circle key={r} r={r} cx={x} cy={y} stroke={subColor} strokeWidth={0.5} fill='transparent' />)}
+            <circle r='1' cx={x} cy={y} stroke='transparent' fill={`url(#${gradientId})`}            >
+                <animate attributeName='r' values={`1;${width / 2}`} dur="2s" repeatCount='indefinite' />
+                <animate attributeName='opacity' values='1;0' dur="2s" repeatCount='indefinite' />
+            </circle>
+            <circle r='2' cx={x} cy={y} fill={subColor} />
+            {splitLinePoints.map(p => <polyline
+                key={p}
+                points={p}
+                stroke={subColor}
+                strokeWidth={0.5}
+                opacity='0.5'
+            />)}
+            {arcD.map(d => <path
+                key={d}
+                d={d}
+                stroke={subColor}
+                strokeWidth='2'
+                fill='transparent'
+            />)}
+            <use href={`#${gId}`}>
+                <animateTransform
+                    attributeName='transform'
+                    type='rotate'
+                    values={`0, ${x} ${y};360, ${x} ${y}`}
+                    dur="3s"
+                    repeatCount='indefinite'
+                />
+            </use>
+        </svg>
+    </div>;
+});
+
 export default Index;

package/src/aldehyde/lowcode-components/decoration/decoration2/index.less

@@ -1,7 +1,7 @@
-.decoration-2 {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
+.decoration-2 {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
 }

package/src/aldehyde/lowcode-components/decoration/decoration2/index.tsx

@@ -1,62 +1,62 @@
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, } from "react";
-import "./index.less";
-
-interface ComponentStyle {
-    mainColor?: string;
-    subColor?: string;
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    base?: { width?: number, height?: number }
-}
-
-export interface ComponentRef {
-    updateConfig: (config: ComponentProps) => void;
-}
-const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const { style: defStyle, base: defBase } = props;
-    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
-    const [width, setWidth] = useState<number>(defBase?.width || 300);
-    const [height, setHeight] = useState<number>(defBase?.height || 100);
-    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            setStyle({ ...newConfig.style });
-            setWidth(newConfig.base.width);
-            setHeight(newConfig.base.height);
-        },
-    }));
-
-    return <div className="decoration-2"  >
-        <svg width={`${width}px`} height={`${height}px`}>
-            <rect x={0} y={height / 2} width={width} height={1} fill={mainColor}>
-                <animate
-                    attributeName={"width"}
-                    from='0'
-                    to={width}
-                    dur={"3s"}
-                    calcMode='spline'
-                    keyTimes='0;1'
-                    keySplines='.42,0,.58,1'
-                    repeatCount='indefinite'
-                />
-            </rect>
-            <rect x={0} y={height / 2} width='1' height='1' fill={subColor}>
-                <animate
-                    attributeName={'x'}
-                    from='0'
-                    to={width}
-                    dur="3s"
-                    calcMode='spline'
-                    keyTimes='0;1'
-                    keySplines='0.42,0,0.58,1'
-                    repeatCount='indefinite'
-                />
-            </rect>
-        </svg>
-    </div>;
-});
-
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 300);
+    const [height, setHeight] = useState<number>(defBase?.height || 100);
+    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setStyle({ ...newConfig.style });
+            setWidth(newConfig.base.width);
+            setHeight(newConfig.base.height);
+        },
+    }));
+
+    return <div className="decoration-2"  >
+        <svg width={`${width}px`} height={`${height}px`}>
+            <rect x={0} y={height / 2} width={width} height={1} fill={mainColor}>
+                <animate
+                    attributeName={"width"}
+                    from='0'
+                    to={width}
+                    dur={"3s"}
+                    calcMode='spline'
+                    keyTimes='0;1'
+                    keySplines='.42,0,.58,1'
+                    repeatCount='indefinite'
+                />
+            </rect>
+            <rect x={0} y={height / 2} width='1' height='1' fill={subColor}>
+                <animate
+                    attributeName={'x'}
+                    from='0'
+                    to={width}
+                    dur="3s"
+                    calcMode='spline'
+                    keyTimes='0;1'
+                    keySplines='0.42,0,0.58,1'
+                    repeatCount='indefinite'
+                />
+            </rect>
+        </svg>
+    </div>;
+});
+
 export default Index;

package/src/aldehyde/lowcode-components/decoration/decoration3/index.less

@@ -1,8 +1,8 @@
-.decoration-3 {
-    width: 100%;
-    height: 100%;
-
-    .decoration-3-container {
-        transform-origin: left top;
-    }
+.decoration-3 {
+    width: 100%;
+    height: 100%;
+
+    .decoration-3-container {
+        transform-origin: left top;
+    }
 }

package/src/aldehyde/lowcode-components/decoration/decoration3/index.tsx

@@ -1,88 +1,88 @@
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo } from "react";
-import "./index.less";
-
-const pointSideLength = 7;
-const svgWH = [300, 35];
-const rowNum = 2;
-const rowPoints = 25;
-const halfPointSideLength = pointSideLength / 2;
-
-const getPoints = () => {
-    const [w, h] = svgWH;
-    const horizontalGap = w / (rowPoints + 1);
-    const verticalGap = h / (rowNum + 1);
-    let points = new Array(rowNum)
-        .fill(0)
-        .map((_, i) =>
-            new Array(rowPoints)
-                .fill(0)
-                .map((_, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)])
-        );
-    return points.reduce((all, item) => [...all, ...item], []);
-};
-
-interface ComponentStyle {
-    mainColor?: string;
-    subColor?: string;
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    base?: { width?: number, height?: number }
-}
-
-export interface ComponentRef {
-    updateConfig: (config: ComponentProps) => void;
-}
-const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const { style: defStyle, base: defBase } = props;
-    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
-    const [width, setWidth] = useState<number>(defBase?.width || 300);
-    const [height, setHeight] = useState<number>(defBase?.height || 100);
-    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            setStyle({ ...newConfig.style });
-            setWidth(newConfig.base.width);
-            setHeight(newConfig.base.height);
-        },
-    }));
-
-    const { svgScale, points } = useMemo(() => ({
-        points: getPoints(),
-        svgScale: [width / svgWH[0], height / svgWH[1]]
-    }), [width, height]);
-
-    return <div className="decoration-3"  >
-        <svg
-            className="decoration-3-container"
-            width={`${svgWH[0]}px`}
-            height={`${svgWH[1]}px`}
-            style={{ transform: `scale(${svgScale[0]},${svgScale[1]})` }}
-        >
-            {points.map((point, i) => (
-                <rect
-                    key={i}
-                    fill={mainColor}
-                    x={point[0] - halfPointSideLength}
-                    y={point[1] - halfPointSideLength}
-                    width={pointSideLength}
-                    height={pointSideLength}
-                >
-                    {Math.random() > 0.6 && (
-                        <animate
-                            attributeName='fill'
-                            values={`${mainColor};${subColor}`}
-                            dur={Math.random() + 1 + 's'}
-                            begin={Math.random() * 2}
-                            repeatCount='indefinite'
-                        />
-                    )}
-                </rect>
-            ))}
-        </svg>
-    </div>;
-});
-
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo } from "react";
+import "./index.less";
+
+const pointSideLength = 7;
+const svgWH = [300, 35];
+const rowNum = 2;
+const rowPoints = 25;
+const halfPointSideLength = pointSideLength / 2;
+
+const getPoints = () => {
+    const [w, h] = svgWH;
+    const horizontalGap = w / (rowPoints + 1);
+    const verticalGap = h / (rowNum + 1);
+    let points = new Array(rowNum)
+        .fill(0)
+        .map((_, i) =>
+            new Array(rowPoints)
+                .fill(0)
+                .map((_, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)])
+        );
+    return points.reduce((all, item) => [...all, ...item], []);
+};
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 300);
+    const [height, setHeight] = useState<number>(defBase?.height || 100);
+    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setStyle({ ...newConfig.style });
+            setWidth(newConfig.base.width);
+            setHeight(newConfig.base.height);
+        },
+    }));
+
+    const { svgScale, points } = useMemo(() => ({
+        points: getPoints(),
+        svgScale: [width / svgWH[0], height / svgWH[1]]
+    }), [width, height]);
+
+    return <div className="decoration-3"  >
+        <svg
+            className="decoration-3-container"
+            width={`${svgWH[0]}px`}
+            height={`${svgWH[1]}px`}
+            style={{ transform: `scale(${svgScale[0]},${svgScale[1]})` }}
+        >
+            {points.map((point, i) => (
+                <rect
+                    key={i}
+                    fill={mainColor}
+                    x={point[0] - halfPointSideLength}
+                    y={point[1] - halfPointSideLength}
+                    width={pointSideLength}
+                    height={pointSideLength}
+                >
+                    {Math.random() > 0.6 && (
+                        <animate
+                            attributeName='fill'
+                            values={`${mainColor};${subColor}`}
+                            dur={Math.random() + 1 + 's'}
+                            begin={Math.random() * 2}
+                            repeatCount='indefinite'
+                        />
+                    )}
+                </rect>
+            ))}
+        </svg>
+    </div>;
+});
+
 export default Index;

package/src/aldehyde/lowcode-components/decoration/decoration4/index.less

@@ -1,30 +1,30 @@
-.decoration-4 {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    .decoration-4-container {
-        display: flex;
-        overflow: hidden;
-        position: absolute;
-        flex: 1;
-        animation: ani-width ease-in-out infinite;
-        animation-duration: 3s;
-        top: 50%;
-        margin-top: -2px;
-    }
-
-    @keyframes ani-width {
-        0% {
-            width: 0%;
-        }
-
-        70% {
-            width: 100%;
-        }
-
-        100% {
-            width: 100%;
-        }
-    }
+.decoration-4 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .decoration-4-container {
+        display: flex;
+        overflow: hidden;
+        position: absolute;
+        flex: 1;
+        animation: ani-width ease-in-out infinite;
+        animation-duration: 3s;
+        top: 50%;
+        margin-top: -2px;
+    }
+
+    @keyframes ani-width {
+        0% {
+            width: 0%;
+        }
+
+        70% {
+            width: 100%;
+        }
+
+        100% {
+            width: 100%;
+        }
+    }
 }