aldehyde 0.2.270 → 0.2.271

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

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const style = {
+    width: "100%",
+    height: "100%",
+    backgroundColor: '#374f85',
+    background: 'linear-gradient(to right, #182848, #1a2848)',
+    color: '#1db3ff',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontSize: '16px',
+    fontWeight: '300'
+}
+
+const Loading = () => {
+
+    return (
+        <div style={style}>加 载 中 . . . . . .</div>
+    );
+}
+
+export default Loading;

package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.less

@@ -0,0 +1,13 @@
+.react-screen-box {
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+
+  .screen-wrapper {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    position: relative;
+    transform-origin: left top;
+  }
+}

package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.tsx

@@ -0,0 +1,122 @@
+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,
+    containerStyle: {
+        width: number,
+        height: number,
+    },
+}
+
+
+export default function ScreenFit(props: ScreenFitProps) {
+    const { width, height, bodyOverflowHidden = true, delay = 500, scaleChange, containerStyle } = props
+    let bodyOverflow: string
+    const elRef = useRef<HTMLDivElement>(null)
+    const [size, setSize] = useState({ width, height, originalHeight: 0, originalWidth: 0 })
+
+    let observer: MutationObserver;
+
+    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 = containerStyle.width || 0;
+        const currentHeight = containerStyle.height || 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})`;
+                scaleChange?.(widthScale, widthScale);
+                break;
+            case 'full-y':
+                elRef.current.style.transform = `scale(${heightScale})`;
+                scaleChange?.(heightScale, heightScale);
+                elRef.current.style.margin = `0px ${(currentWidth - +realWidth * heightScale) / 2}px`;
+                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) return;
+        updateSize();
+        updateScale();
+    }, delay)
+
+    function initState() {
+        if (bodyOverflowHidden) {
+            bodyOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+        }
+        observer = new MutationObserver(() => onResize());
+        observer.observe(elRef.current, {
+            attributes: true,
+            attributeFilter: ['style'],
+            attributeOldValue: true
+        })
+        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 className={'react-screen-box'}>
+            <div className={'screen-wrapper'} ref={elRef}>
+                {props.children}
+            </div>
+        </div>
+    )
+}

package/src/aldehyde/lowcode-components/lowcode-view/index.less

@@ -0,0 +1,12 @@
+.lowcodeView {
+    width: 100%;
+    -ms-overflow-style: none;
+    /* IE和Edge */
+    scrollbar-width: none;
+    /* Firefox */
+}
+
+.lowcodeView::-webkit-scrollbar {
+    display: none;
+    /* Chrome, Safari和Opera */
+}

package/src/aldehyde/lowcode-components/lowcode-view/index.tsx

@@ -0,0 +1,107 @@
+import React, { CSSProperties, useEffect, useState, useRef } from 'react'
+import { useParams } from 'react-router-dom';
+import Loading from "./component/loading";
+import layerBuilder from "./component/layer-builder";
+import './component/font/FontGlobal.css';
+import ScreenFit from "./component/screen-fit";
+import { LayerManagerDataType, CanvasConfig } from "./interface";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import LowcodeConstant from "./lowcode-constant";
+import abstractDesignerLoader from "./component/abstract-designer-loader";
+import "./index.less";
+
+const fromBase64 = (base64: string) => {
+    const binaryString = atob(base64);
+    const utf8Array = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+        utf8Array[i] = binaryString.charCodeAt(i);
+    }
+    return new TextDecoder().decode(utf8Array);
+}
+
+
+const screenFitStyleMap: Record<string, CSSProperties> = {
+    "none": { overflow: "auto" },
+    'scale': { overflow: 'hidden' },
+    'full-screen': { overflow: 'hidden' },
+    'full-x': { overflow: 'hidden scroll' },
+    'full-y': { overflow: 'scroll hidden' }
+}
+
+const serverKey = LowcodeConstant.lowcodeDtmpl.serverKey;
+const sourceId = LowcodeConstant.lowcodeDtmpl.sourceId;
+
+interface Props {
+    isFullScreen: boolean
+}
+
+const LowcodeView = (props: Props) => {
+    const { isFullScreen } = props;
+    const { sourceId: code } = useParams();
+    const canvasRef = useRef(null);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [layerManager, setLayerManager] = useState<LayerManagerDataType>();
+    const [canvasConfig, setCanvasConfig] = useState<CanvasConfig>();
+    const { width, height, adaptationType, backgroundColor, backgroundImage } = canvasConfig || {};
+
+    useEffect(() => {
+        //加载
+        abstractDesignerLoader.load();
+    }, []);
+
+    // 获取画面数据
+    const getViewData = async () => {
+        setLoading(true);
+        const dtmpl = await HcserviceV3.requestMstrucDtmplData(serverKey, sourceId, code, null);
+        const data = dtmpl?.fieldMap || {};
+        const { layerManager, canvasManager } = data["内容"] ? JSON.parse(fromBase64(data["内容"]) || '{}') : {};
+        setLayerManager(layerManager);
+        setCanvasConfig(canvasManager);
+        setLoading(false);
+    }
+
+    useEffect(() => {
+        if (code) {
+            getViewData();
+        } else {
+            setLayerManager({});
+            setCanvasConfig({});
+        }
+    }, [code])
+
+    const canvasDom = () => <div style={{
+        width,
+        height,
+        background: backgroundColor,
+        backgroundImage: `url(${backgroundImage})`,
+        backgroundSize: "100% 100%",
+        backgroundRepeat: 'no-repeat',
+        overflow: 'hidden',
+        position: "relative"
+    }}>
+        {layerBuilder.buildCanvasComponents(layerManager)}
+    </div>;
+
+    return (
+        <div ref={canvasRef} className='lowcodeView' style={{ height: isFullScreen ? "100vh" : "calc(100vh - 121px)", ...screenFitStyleMap[adaptationType || "scale"] }}>
+            {loading || !layerManager ?
+                <Loading />
+                :
+                (adaptationType === 'none' ? canvasDom() :
+                    <ScreenFit
+                        width={width}
+                        height={height}
+                        mode={adaptationType}
+                        containerStyle={{
+                            width: canvasRef.current?.clientWidth,
+                            height: canvasRef.current?.clientHeight
+                        }}
+                    >
+                        {canvasDom()}
+                    </ScreenFit>)
+            }
+        </div>
+    );
+};
+
+export default LowcodeView;

package/src/aldehyde/lowcode-components/lowcode-view/interface.ts

@@ -0,0 +1,190 @@
+export interface ILayerItem {
+    //唯一标识
+    id?: string | undefined;
+    //组件名称
+    name?: string | undefined;
+    //组件类型
+    type?: string | undefined;
+    //宽度
+    width?: number;
+    //高度
+    height?: number;
+    //坐标
+    x?: number;
+    //y坐标
+    y?: number;
+    //是否隐藏
+    hide?: boolean;
+    //是否锁定
+    lock?: boolean;
+    //顺序
+    order?: number;
+    //父图层id
+    pid?: string;
+    //子图层列表
+    children?: ILayerItem[];
+    //子图层头指针
+    childHeader?: string;
+    //子图层尾指针
+    childTail?: string;
+    //前指针
+    prev?: string;
+    //后指针
+    next?: string;
+    // 旋转
+    transform?: string;
+}
+
+export interface LayerManagerDataType {
+    //元素样式
+    elemConfigs?: { [key: string]: Record<string, any> };
+    //图层信息
+    layerConfigs?: { [key: string]: ILayerItem };
+    //图层头指针
+    layerHeader?: string;
+    //图层尾指针
+    layerTail?: string;
+}
+
+export type AdaptationType = 'scale' | 'full-screen' | 'full-x' | 'full-y' | 'none';
+
+/**
+ * 画布配置
+ */
+export interface CanvasConfig {
+    //开启栅格化
+    rasterize?: boolean;
+    //栅格化拖拽步长
+    dragStep?: number;
+    //栅格化缩放步长
+    resizeStep?: number;
+    //画布宽
+    width?: number;
+    //画布高
+    height?: number;
+    //屏幕适配
+    adaptationType?: AdaptationType;
+    // 画布背景颜色
+    backgroundColor?: string;
+    // 画布背景图
+    backgroundImage?: string;
+    // 画布背景图类型
+    bagImgType?: string;
+}
+
+export interface ComponentInfoType {
+    id: string;
+    name: string;
+    type: string;
+}
+
+/**
+ * 数据配置项
+ */
+
+export interface APIConfig {
+    sourceId: string;
+}
+
+export interface DataConfigType {
+    //数据来源方式
+    sourceType?: 'static' | 'api';
+    //静态数据(除了存放静态数据外，该属性还有动态数据的中转站的作用），其他动态数据获取到后统一都存放在静态数据中，需要使用到的时候再从静态数据中获取
+    staticData?: any;
+    apiData?: APIConfig;
+
+}
+
+export interface IFilterConfigType {
+    enable?: boolean;
+    blur?: number;
+    brightness?: number;
+    contrast?: number;
+    opacity?: number;
+    saturate?: number;
+    hueRotate?: number;
+}
+
+export interface ComponentBaseProps {
+    base?: ComponentInfoType;
+    style?: Record<string, any>;
+    data?: DataConfigType;
+    filter?: IFilterConfigType;
+}
+
+/**
+ * 主题
+ */
+export interface ThemeColors {
+    //主体色
+    main?: string;
+    //主文字
+    mainText?: string;
+    //背景色
+    subText?: string;
+    //背景色
+    background?: string;
+    //补充一
+    supplementFirst?: string;
+    //补充二
+    supplementSecond?: string;
+}
+
+export interface ThemeItemType {
+    colors: ThemeColors;
+    name: string;
+    id: string;
+}
+
+export interface IFilter {
+    id: string;
+    name: string;
+    func: string;
+}
+
+export interface ProjectDataType {
+    //项目id
+    id?: string;
+    //画布设置
+    canvasManager?: CanvasConfig;
+    //全局主题
+    themeManager?: Array<ThemeItemType>;
+    //图层管理
+    layerManager?: LayerManagerDataType;
+    //过滤器管理
+    filterManager?: { filters: Record<string, IFilter>; };
+}
+
+/**
+ * 组件基础信息
+ */
+export interface BaseInfoType {
+    /**
+     * 组件显示名称
+     */
+    compName: string;
+    /**
+     * 组件标识
+     */
+    compKey: string;
+    /**
+     * 主分类
+     */
+    categorize?: string;
+    /**
+     * 子分类
+     */
+    subCategorize?: string;
+    /**
+     * 版本
+     */
+    version?: string;
+    /**
+     * 初始宽度
+     */
+    width?: number;
+    /**
+     * 初始高度
+     */
+    height?: number;
+}

package/src/aldehyde/lowcode-components/lowcode-view/lowcode-constant.tsx

@@ -0,0 +1,12 @@
+function LowcodeConstant() {
+
+}
+export default LowcodeConstant;
+
+
+LowcodeConstant.lowcodeDtmpl = {
+    name: '低代码页面数据请求',
+    serverKey: "DragDropPageServer",
+    sourceId: '446165759669608455',
+    type: 'dtmpl',
+}

package/src/aldehyde/module/dtmpl-edit-page.tsx

@@ -319,7 +319,6 @@ export default class DtmplEditPage extends React.PureComponent<
     const { dtmplConfig, id, dtmplData } = this.state;
 
     let title1 = title ? title : dtmplConfig ? dtmplConfig.title : "";
-debugger
     return (
       <>
         {" "}
@@ -364,10 +363,11 @@ debugger
             mask={false}
             onClose={onCancel}
             open={open}
-            width={width}
             height={placement=="top" || placement=="bottom" ? height : "calc(100%)"}
             style={{
-              maxWidth: (placement=="top" || placement=="bottom")?"100vw" :"92vw",
+              maxWidth: (placement=="top" || placement=="bottom")? "100vw" :"92vw",
+              border:"2px solid #d9d9d9",
+              width:width,
             }}
             extra={<Space>{this.getFooter()}</Space>}
           >

package/src/aldehyde/module/dtmpl-view-drawer.tsx

@@ -41,7 +41,6 @@ class DtmplViewDrawer extends React.PureComponent<DtmplViewDrawerProps, DtmplVie
 
     render() {
         const {title,sourceId,code,placement,open,onClose,width,height,cancelText,editable,serverKey,codeSource}=this.props;
-        debugger
         return  (<Drawer
                     height={placement=="top" || placement=="bottom" ? height: "calc(100%)"}
                     placement={placement}
@@ -50,11 +49,11 @@ class DtmplViewDrawer extends React.PureComponent<DtmplViewDrawerProps, DtmplVie
                     mask={false}
                     onClose={onClose}
                     open={open}
-                    width={width}
                     style={{
                        maxWidth: (placement=="top" || placement=="bottom")?"100vw" :"92vw",
                         //borderRightStyle:"2px solid #d9d9d9",
                         border:"2px solid #d9d9d9",
+                        width:width,
                         // borderRightWidth:"2px",
                         // borderLeftWidth:"2px",
                     }}

package/src/aldehyde/routable/ltmpl-route.tsx

@@ -350,7 +350,6 @@ Z
 
         let windowWidth = ltmplConfig?.buttonViewConfig?.windowWidth
         windowWidth= windowWidth && windowWidth>0 ? windowWidth : 1280;
-
         let windowHeight = ltmplConfig?.buttonViewConfig?.windowHeight;
         windowHeight= windowHeight && windowHeight>0 ? windowHeight : '80vh';