aldehyde 0.2.515 → 0.2.516

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/placeholder-component/index.tsx

@@ -1,82 +1,82 @@
-
-import React, { ForwardedRef, forwardRef, useMemo, useImperativeHandle, useState } from 'react';
-import Units from "../../units/index";
-import { useLocale } from "../../locale/useLocale";
-
-const defStyle = {
-    color: '#9a9a9a',
-    height: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    border: '1px solid #9a9a9a',
-};
-
-export interface ComponentProps {
-    style: { key: string; compsIds?: string[]; },
-    isDesignMode?: boolean; // 是否编辑模式
-    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
-    setSearchParams: (data: any) => void;
-}
-
-export interface CompImageonentRef {
-    updateConfig: (newConfig: ComponentProps) => void;
-}
-
-const PlaceholderComponent = forwardRef((props: ComponentProps, ref: ForwardedRef<CompImageonentRef>) => {
-    const { isDesignMode, setSearchParams, style } = props;
-    const { translate } = useLocale();
-    const [key, setKey] = useState<string>(style?.key);
-    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
-    const [compsIds, setCompsIds] = useState<string[]>(style?.compsIds || []);
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            setKey(newConfig.style?.key);
-            setInitSearchParams(newConfig.initSearchParams || {});
-            setCompsIds(newConfig.style?.compsIds || []);
-        },
-    }));
-
-
-    const handleParams = (params: { [key: string]: any }) => {
-        if (!compsIds?.length) {
-            return;
-        }
-        setSearchParams(val => {
-            const temObj = {};
-            for (const compId of compsIds) {
-                if (val[compId]) { // 全局搜索参数中存在当前组件的搜索参数，则合并
-                    val[compId] = { ...val[compId], ...params }
-                } else {
-                    temObj[compId] = params;
-                }
-            };
-            return { ...val, ...temObj };
-        });
-    }
-
-
-    const renderComponent = useMemo(() => {
-        const temComponent = Units.getCustomComponent(key);
-        if (temComponent) {
-            return React.createElement(temComponent, { params: initSearchParams, handleParams });
-        }
-        return <div style={defStyle}>{translate("${没有找到自定义组件}")}</div>;
-    }, [key, initSearchParams]);
-
-    return (
-        <div style={{ width: '100%', height: '100%' }}>
-            {isDesignMode || !key ?
-                <div style={defStyle}>
-                    <div>{translate("${占位组件}")}</div>
-                </div> :
-                <div style={{ width: '100%', height: '100%', overflow: "auto" }}>
-                    {renderComponent}
-                </div>
-            }
-        </div>
-    );
-});
-
+
+import React, { ForwardedRef, forwardRef, useMemo, useImperativeHandle, useState } from 'react';
+import Units from "../../units/index";
+import { useLocale } from "../../locale/useLocale";
+
+const defStyle = {
+    color: '#9a9a9a',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    border: '1px solid #9a9a9a',
+};
+
+export interface ComponentProps {
+    style: { key: string; compsIds?: string[]; },
+    isDesignMode?: boolean; // 是否编辑模式
+    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
+    setSearchParams: (data: any) => void;
+}
+
+export interface CompImageonentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+}
+
+const PlaceholderComponent = forwardRef((props: ComponentProps, ref: ForwardedRef<CompImageonentRef>) => {
+    const { isDesignMode, setSearchParams, style } = props;
+    const { translate } = useLocale();
+    const [key, setKey] = useState<string>(style?.key);
+    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [compsIds, setCompsIds] = useState<string[]>(style?.compsIds || []);
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setKey(newConfig.style?.key);
+            setInitSearchParams(newConfig.initSearchParams || {});
+            setCompsIds(newConfig.style?.compsIds || []);
+        },
+    }));
+
+
+    const handleParams = (params: { [key: string]: any }) => {
+        if (!compsIds?.length) {
+            return;
+        }
+        setSearchParams(val => {
+            const temObj = {};
+            for (const compId of compsIds) {
+                if (val[compId]) { // 全局搜索参数中存在当前组件的搜索参数，则合并
+                    val[compId] = { ...val[compId], ...params }
+                } else {
+                    temObj[compId] = params;
+                }
+            };
+            return { ...val, ...temObj };
+        });
+    }
+
+
+    const renderComponent = useMemo(() => {
+        const temComponent = Units.getCustomComponent(key);
+        if (temComponent) {
+            return React.createElement(temComponent, { params: initSearchParams, handleParams });
+        }
+        return <div style={defStyle}>{translate("${没有找到自定义组件}")}</div>;
+    }, [key, initSearchParams]);
+
+    return (
+        <div style={{ width: '100%', height: '100%' }}>
+            {isDesignMode || !key ?
+                <div style={defStyle}>
+                    <div>{translate("${占位组件}")}</div>
+                </div> :
+                <div style={{ width: '100%', height: '100%', overflow: "auto" }}>
+                    {renderComponent}
+                </div>
+            }
+        </div>
+    );
+});
+
 export default PlaceholderComponent;

package/src/aldehyde/lowcode-components/text-scroller/index.less

@@ -1,29 +1,29 @@
-.text-scroller-container {
-  --speed: 10s;
-  --container-width: 320px;
-
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  position: relative;
-
-  .text-scroller {
-    height: inherit;
-    position: absolute;
-    color: white;
-    animation: scrollText var(--speed) linear infinite;
-    display: flex;
-    align-items: center;
-  }
-
-  @keyframes scrollText {
-    0% {
-      transform: translateX(var(--container-width));
-    }
-
-    100% {
-      transform: translateX(-100%);
-    }
-  }
+.text-scroller-container {
+  --speed: 10s;
+  --container-width: 320px;
+
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  position: relative;
+
+  .text-scroller {
+    height: inherit;
+    position: absolute;
+    color: white;
+    animation: scrollText var(--speed) linear infinite;
+    display: flex;
+    align-items: center;
+  }
+
+  @keyframes scrollText {
+    0% {
+      transform: translateX(var(--container-width));
+    }
+
+    100% {
+      transform: translateX(-100%);
+    }
+  }
 }