aldehyde 0.2.474 → 0.2.476

package/src/aldehyde/draw-canvas-edit/constant.ts

@@ -0,0 +1,6 @@
+export const fileUpload = {
+    name: '文件模型上传',
+    sourceId: '505356896556589056',
+    serverKey: "localDevopsServer",
+    type: 'dtmpl',
+};

package/{lib/draw-canvas/edit → src/aldehyde/draw-canvas-edit}/index.less

@@ -1,8 +1,19 @@
 .draw {
     width: 100%;
     height: 100%;
-    display: flex;
-    flex-direction: column;
+
+    .ant-spin,
+    .ant-spin-container {
+        width: 100%;
+        height: 100%;
+    }
+
+    .draw-main {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
 
     *:focus-visible {
         outline: none;
@@ -29,6 +40,10 @@
             width: 220px;
             background-color: #f5f5f5;
             border-left: 1px solid #ccc;
+
+            .ant-input-disabled .ant-input-suffix {
+                display: none;
+            }
         }
     }
 }

package/src/aldehyde/{draw-canvas/edit → draw-canvas-edit}/index.tsx

@@ -1,4 +1,8 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { gunzipSync, strFromU8 } from 'fflate';
+import { Spin } from "antd";
+import { hexToUint8Array } from 'uint8array-extras';
+import HcserviceV3 from "../tmpl/hcservice-v3";
 import { Render } from './components/render';
 import { GraphType, PageSettings, AssetSettings, LinkSettings } from './components/render/types';
 import MainHeader from './components/main-header';
@@ -7,7 +11,12 @@ import SettingForm from "./components/setting-form";
 import type Konva from 'konva';
 import './index.less';
 
-const Index = () => {
+interface Props {
+    recordCode: string
+}
+
+const Index = (props: Props) => {
+    const { recordCode } = props;
     const boardRef = useRef<HTMLDivElement>(null); // 画布边框
     const stageRef = useRef<HTMLDivElement>(null); // 画布
     const renderRef = useRef<Render | null>(null); // 渲染器实例
@@ -19,7 +28,35 @@ const Index = () => {
     const [assetCurrent, setAssetCurrent] = useState<Konva.Node>(); // 当前选中组件
     const [linkCurrent, setLinkCurrent] = useState<Konva.Line>(); // 当前选中连线
     const [texting, setTexting] = useState<boolean>(false); // 添加文本状态
+    const [showGrid, setShowGrid] = useState<boolean>(true); // 是否显示网格
+    const [showAttract, setShowAttract] = useState<boolean>(true); // 是否显示磁吸
     const assetCurrentRef = useRef<Konva.Node>(null); // 当前选中组件Ref
+    const [loading, setLoading] = useState<boolean>(false);
+
+    // 获取视图数据
+    const getViewData = async () => {
+        setLoading(true);
+        const data = await HcserviceV3.getDiagram2DConfig(recordCode);
+        const content = data?.[0]?.content;
+        if (!content) {
+            setLoading(false);
+            return;
+        }
+        const temByteArray = hexToUint8Array(content.replace(/^0x/i, ""));
+        // 1. 将压缩的 ByteArray 解压回原始的 Uint8Array
+        const decompressedBuffer = gunzipSync(temByteArray);
+        // 2. 将 Uint8Array 转换回普通字符串
+        const originalData = strFromU8(decompressedBuffer);
+        setLoading(false);
+        // 重置画面数据
+        await renderRef.current.importExportTool.restore(originalData as string);
+    }
+
+    useEffect(() => {
+        if (recordCode) {
+            getViewData();
+        }
+    }, [recordCode]);
 
     // 初始化渲染器
     const initRender = useCallback((width: number, height: number) => {
@@ -27,7 +64,7 @@ const Index = () => {
         const render = new Render(stageRef.current, {
             width, height,
             showBg: true, showRuler: true, showRefLine: true,
-            showPreview: true, showContextmenu: true,
+            showPreview: false, showContextmenu: true,
             attractResize: true, attractBg: true, attractNode: true,
         });
         renderRef.current = render;
@@ -104,33 +141,55 @@ const Index = () => {
         renderRef.current.setLinkSettings(linkCurrent, { ...linkSettings, ...val }, true);
     }
 
+    // 更改磁吸显示
+    const handleShowAttract = (val: boolean) => {
+        setShowAttract(val);
+        renderRef.current.changeShowAttract(val);
+    }
+
+    // 更改网格显示
+    const handleShowGrid = (val: boolean) => {
+        setShowGrid(val);
+        renderRef.current.changeShowGrid(val);
+    }
+
     return (
         <div className="draw">
-            <MainHeader
-                render={renderRef.current}
-                graphType={graphType}
-                texting={texting}
-                onGraphTypeChange={(val) => renderRef.current.changeGraphType(val)}
-                onTexting={() => renderRef.current.changeTexting(true)}
-            />
-            <div className='draw-content'>
-                <div className='left'><AssetBar /></div>
-                <div className='center' ref={boardRef} >
-                    <div ref={stageRef} />
-                </div>
-                <div className='right'>
-                    <SettingForm
-                        pageSettings={pageSettings}
-                        onPageSettingsChange={handlePageSetting}
-                        assetCurrent={assetCurrent}
-                        assetSettings={assetSettings}
-                        onAssetSettingsChange={handleAssetSettings}
-                        linkCurrent={linkCurrent}
-                        linkSettings={linkSettings}
-                        onLinkSettingsChange={handleLinkSettings}
+            <Spin spinning={loading}>
+                <div className='draw-main'>
+                    <MainHeader
+                        render={renderRef.current}
+                        graphType={graphType}
+                        texting={texting}
+                        onGraphTypeChange={(val) => renderRef.current.changeGraphType(val)}
+                        onTexting={() => renderRef.current.changeTexting(true)}
+                        recordCode={recordCode}
+                        setShowGrid={handleShowGrid}
+                        showGrid={showGrid}
+                        setShowAttract={handleShowAttract}
+                        showAttract={showAttract}
                     />
+                    <div className='draw-content'>
+                        <div className='left'><AssetBar /></div>
+                        <div className='center' ref={boardRef} >
+                            <div ref={stageRef} />
+                        </div>
+                        <div className='right'>
+                            <SettingForm
+                                pageSettings={pageSettings}
+                                onPageSettingsChange={handlePageSetting}
+                                assetCurrent={assetCurrent}
+                                assetSettings={assetSettings}
+                                onAssetSettingsChange={handleAssetSettings}
+                                linkCurrent={linkCurrent}
+                                linkSettings={linkSettings}
+                                onLinkSettingsChange={handleLinkSettings}
+                                recordCode={recordCode}
+                            />
+                        </div>
+                    </div>
                 </div>
-            </div>
+            </Spin>
         </div>
     )
 }

package/src/aldehyde/draw-canvas-view/index.less

@@ -0,0 +1,60 @@
+.view-loading {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.draw-viewer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 8px;
+    overflow: hidden;
+    position: relative;
+
+    *:focus-visible {
+        outline: none;
+    }
+
+    // 工具栏
+    .draw-viewer-toolbar {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        z-index: 9;
+        display: none;
+
+        .fit {
+            font-size: 20px;
+            cursor: pointer;
+        }
+    }
+
+    // 画布区域
+    .draw-viewer-content {
+        width: 100%;
+        flex-grow: 1;
+        background-color: var(--ant-layout-body-bg);
+        position: relative;
+        overflow: hidden;
+
+        // Konva canvas 容器
+        >div {
+            width: 100% !important;
+            height: 100% !important;
+
+            canvas {
+                display: block;
+            }
+        }
+    }
+}
+
+.draw-viewer:hover {
+    .draw-viewer-toolbar {
+        display: block;
+    }
+}

package/src/aldehyde/draw-canvas-view/index.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import { gunzipSync, strFromU8 } from 'fflate';
+import { Spin } from "antd";
+import { hexToUint8Array } from 'uint8array-extras';
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import Viewer from './view';
+import './index.less';
+
+interface Props {
+    recordCode: string
+}
+
+const Index = (props: Props) => {
+    const { recordCode } = props;
+    const [jsonData, setJsonData] = useState("{}"); // 画面数据
+    const [loading, setLoading] = useState(false); // 加载状态
+
+    // 获取视图数据
+    const getViewData = async () => {
+        setLoading(true);
+        const data = await HcserviceV3.getDiagram2DConfig(recordCode);
+        const content = data?.[0]?.content;
+        if (!content) {
+            return;
+        }
+        const temByteArray = hexToUint8Array(content.replace(/^0x/i, ""));
+        // 1. 将压缩的 ByteArray 解压回原始的 Uint8Array
+        const decompressedBuffer = gunzipSync(temByteArray);
+        // 2. 将 Uint8Array 转换回普通字符串
+        const originalData = strFromU8(decompressedBuffer);
+        setLoading(false);
+        setJsonData(originalData);
+    }
+
+    useEffect(() => {
+        if (recordCode) {
+            getViewData();
+        }
+    }, [recordCode])
+
+    if (loading) {
+        return <div className="view-loading"><Spin /></div>;
+    }
+
+    return <Viewer data={jsonData} />;
+};
+
+export default Index;

package/src/aldehyde/draw-canvas-view/view.tsx

@@ -0,0 +1,212 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import { Space, Button } from "antd";
+import { ExpandOutlined } from '@ant-design/icons';
+import chunk from "lodash/chunk";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import WebSocket from "../tmpl/web-socket";
+import { AssetSettings } from '../draw-canvas-edit/components/render/types';
+import { Render } from '../draw-canvas-edit/components/render';
+import './index.less';
+
+// nodeId组件ID
+type DataSourceConfig = { sourceId: string, nodeId: string } & { [key: string]: any };
+
+interface ViewerProps {
+  data?: string; // 画布 JSON 数据 
+  width?: number | string;
+  height?: number | string;
+  // 组件数据源初始化查询参数；公共参数、指定组件参数：例：{公共参数key:value,指定组件Id(编辑页获取):{参数key:value}}
+  initSearchParams?: { [key: string]: any },
+}
+
+const Index = (props: ViewerProps) => {
+  const { data, width = '100%', height = '100%', initSearchParams } = props;
+  const boardRef = useRef<HTMLDivElement>(null);
+  const stageRef = useRef<HTMLDivElement>(null);
+  const renderRef = useRef<Render | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
+  const wsRef = useRef(undefined); // 实时数据websocket连接
+  const subscribeRef = useRef(undefined); // 实时数据订阅
+
+  // 初始化渲染器（只读模式）
+  const initRender = useCallback(
+    (width: number, height: number) => {
+      if (renderRef.current || !stageRef.current) return;
+      const render = new Render(stageRef.current, {
+        width,
+        height,
+        showRuler: false, // 不需要标尺
+        showRefLine: false, // 不需要参考线
+        showPreview: false, // 不需要预览框
+        showContextmenu: false, // 不需要右键菜单
+        showBg: true,
+        readonly: true // ★ 只读模式
+      });
+      renderRef.current = render;
+      // 如果有数据，恢复画布
+      if (data) {
+        loadData(render, data);
+      }
+    },
+    [data]
+  );
+
+  // 更新组件数据->更新画面
+  const updateAssetSettings = (id: string, settings: Partial<AssetSettings>) => {
+    if (!renderRef.current || !id || !settings) return;
+    renderRef.current.updateAssetById(id, settings);
+  };
+
+  // all(所有数据源组件)、init(初始化请求组件)
+  const handleDataSourceParams = (nodes: { [key: string]: any }[]) => {
+    // publicParams 组件公共参数
+    const publicParams = Object.keys(initSearchParams || {}).reduce((total, next) => {
+      if (!nodes.find(node => node.id === next)) {
+        total[next] = initSearchParams[next];
+      }
+      return total;
+    }, {});
+    const dataSourceConfigs = nodes.reduce((total, next) => {
+      const settings = next.settings || {};
+      const temParams = { ...publicParams, ...(initSearchParams?.[next.id] || {}) }; // 指定组件传参,指定传参可覆盖公共
+      if (settings.isInitParams) { // 组件数据源接收外部参数，更新参数
+      }
+      if (settings.dataSource) { // 整合初始化请求/ws请求参数
+        const itemConfig = { sourceId: settings.dataSource, nodeId: next.id, ...(settings.isInitParams ? temParams : {}) };
+        if (settings.isInit) { // 初始化请求
+          total.initDataSource.push(itemConfig);
+        }
+        total.allDataSource.push(itemConfig);
+      }
+      return total;
+    }, { allDataSource: [], initDataSource: [] });
+    return dataSourceConfigs;
+  }
+
+  // 获取初始化组件数据
+  const getInitComponentData = async (dataSourceConfigs: DataSourceConfig[]) => {
+    if (!dataSourceConfigs.length) return;
+    const temSourceConfigs = chunk(dataSourceConfigs, 10); // 每批处理10个组件数据
+    temSourceConfigs.forEach(i => {
+      HcserviceV3.requestCharMultitData(null, JSON.stringify(i)).then(rs => {
+        const { status, ...data } = rs || {};
+        if (status === "success") {
+          for (const item in data) {  // 更新组件数据
+            //  updateAssetSettings(item, { data: data[item] || {} };
+          }
+        }
+      })
+    })
+  };
+
+  // 获取当前画面数据源配置
+  const getCharWSConfig = async (dataSourceConfigs: DataSourceConfig[]) => {
+    if (!dataSourceConfigs.length) return;
+    const sourceIds = dataSourceConfigs.map(r => r.sourceId);
+    const res = await HcserviceV3.requestCharWSConfig(null, sourceIds);
+    const wsSourceIds = Object.keys(res?.config || {});
+    if (!wsSourceIds?.length) {
+      return;
+    }
+    return dataSourceConfigs.filter(r => wsSourceIds.includes(r.sourceId));
+  }
+
+  // 实时订阅组件数据
+  const webSocketComponentData = async (dataSourceConfigs: DataSourceConfig[]) => {
+    if (subscribeRef.current) { subscribeRef.current.unsubscribe(); }
+    const temArr = await getCharWSConfig(dataSourceConfigs);
+    if (!temArr?.length) {
+      return;
+    }
+    wsRef.current = WebSocket.getInstance("v3/kk-ws");
+    // 订阅数据
+    subscribeRef.current = await wsRef.current.subscribe(``, { dataSourceConfigs: JSON.stringify(temArr) }, (data) => {
+      for (const item in data) {  // 更新组件数据
+        //  updateAssetSettings(item, { data: data[item] || {} };
+      }
+    });
+  }
+
+  // 获取所有组件-更新数据
+  const onAssetsLoaded = () => {
+    if (!renderRef.current) return;
+    const assets = renderRef.current.getAllAssets();
+    if (!assets?.length) return;
+    const { allDataSource, initDataSource } = handleDataSourceParams(assets);
+    getInitComponentData(initDataSource); // 初始化请求
+    webSocketComponentData(allDataSource); // ws订阅数据
+  }
+
+  // 加载画布数据
+  const loadData = useCallback(async (render: Render, jsonData: string) => {
+    try {
+      await render.importExportTool.restore(jsonData);
+      // 数据加载完成后自适应居中
+      render.positionTool.positionFit();
+      onAssetsLoaded();
+    } catch (e) {
+      console.error('Failed to load canvas data:', e);
+    }
+  }, []);
+
+  // 监听容器尺寸变化
+  useEffect(() => {
+    if (!boardRef.current) return;
+    const observer = new ResizeObserver(() => {
+      const { width, height } = boardRef.current.getBoundingClientRect();
+      if (renderRef.current) {
+        renderRef.current.resize(width, height); // 更新尺寸
+        renderRef.current.positionTool.positionFit(); // 自适应居中
+      } else {
+        initRender(width, height);
+      }
+    });
+    observer.observe(boardRef.current);
+    observerRef.current = observer;
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  // 当外部 data 更新时，重新加载
+  useEffect(() => {
+    if (renderRef.current && data) {
+      loadData(renderRef.current, data);
+    }
+  }, [data, loadData]);
+
+  const handleFit = useCallback(() => {
+    if (!renderRef.current) return;
+    renderRef.current.positionTool.positionFit();
+  }, []);
+
+  // 清理
+  useEffect(() => {
+    return () => {
+      if (renderRef.current) {
+        renderRef.current.stage.destroy();
+        renderRef.current = null;
+      }
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div className="draw-viewer" style={{ width, height }}>
+      <div className="draw-viewer-toolbar">
+        <Space>
+          <Button type="text" className='fit' onClick={handleFit} icon={<ExpandOutlined />} />
+        </Space>
+      </div>
+      {/* 画布区域 */}
+      <div className="draw-viewer-content" ref={boardRef}>
+        <div ref={stageRef} />
+      </div>
+    </div>
+  );
+};
+
+export default Index;

package/src/aldehyde/form/form-Item-group.tsx

@@ -149,7 +149,7 @@ export default class FormItemGroup extends React.PureComponent<
         wrapperCol={{ span: wrapperColSpan }}
         tooltip={(!item.tip || item.tip == "") ? undefined : item.tip}
         initialValue={fieldValue}
-        style={{ margin: 4 }}
+        style={{ margin: "4px 4px 12px" }}
         rules={TmplConfigAnalysis.getRules(item, translate)}
       >
         <RenderEntryControl
@@ -201,7 +201,6 @@ export default class FormItemGroup extends React.PureComponent<
             </FormItem>
           );
         } else {
-
           formItem = item.shouldUpdate ? (
             <FormItem noStyle shouldUpdate={item.shouldUpdate}>
               {() => this.initFormItem(item, fieldValue)}
@@ -219,13 +218,13 @@ export default class FormItemGroup extends React.PureComponent<
     for (let i = 0; i < formItemList.length; i = i + 1) {
       let colSpan = fields[i].colSpan;
 
-      if (fields[i].extControlType == "hidden") {
+      if (fields[i].extControlType == "hidden" || fields[i].hidden) {
         colSpan = 0;
       } else if (maxColsOnRow && maxColsOnRow == 1) {
         colSpan = 2;
       }
       let col = (
-        <Col key={i} span={12 * colSpan} >
+        <Col key={i} span={12 * colSpan} style={{ width: "stretch" }}>
           {formItemList[i]}
         </Col>
       );
@@ -233,7 +232,7 @@ export default class FormItemGroup extends React.PureComponent<
     }
 
     const row = (
-      <Row gutter={[16, 8]} key={1}>
+      <Row gutter={[16, 0]} key={1}>
         {colList}
       </Row>
     );

package/src/aldehyde/lowcode-components/index.ts

@@ -53,6 +53,7 @@ import PlaceholderComponent from "./placeholder-component";
 import Carousel from "./carousel";
 import SearchForm from "./search-form";
 import BaseRadio from "./base-radio";
+import RadarChart from "./radar-chart";
 
 
 type CompoundedComponent = {
@@ -110,7 +111,8 @@ type CompoundedComponent = {
     PlaceholderComponent?: typeof PlaceholderComponent,
     Carousel?: typeof Carousel,
     SearchForm?: typeof SearchForm,
-    BaseRadio?: typeof BaseRadio
+    BaseRadio?: typeof BaseRadio,
+    RadarChart?: typeof RadarChart
 };
 
 const LowcodeComponents: CompoundedComponent = {
@@ -123,7 +125,7 @@ const LowcodeComponents: CompoundedComponent = {
     Decoration6, Decoration7, Decoration8, Decoration9, Decoration10, Decoration11,
     BaseTable, TextScroller, CapsuleBarChart, CircularProgressChart, ActTable, ProgressChart,
     LineBarChart, Column3dChart, StrokeAnimation, EffectScatterMap3D, BaseButton, BaseTabs,
-    PlaceholderComponent, Carousel, SearchForm, BaseRadio
+    PlaceholderComponent, Carousel, SearchForm, BaseRadio, RadarChart
 };
 
 export default LowcodeComponents;

package/src/aldehyde/lowcode-components/lowcode-view/component/assets.ts

@@ -54,6 +54,7 @@ import PlaceholderComponent from "../../placeholder-component";
 import Carousel from "../../carousel";
 import SearchForm from "../../search-form";
 import BaseRadio from "../../base-radio";
+import RadarChart from "../../radar-chart";
 
 interface ComponentItemConfig {
     baseInfo: BaseInfoType, // 基础信息
@@ -467,5 +468,12 @@ export const compsConfig: { [key: string]: ComponentItemConfig } = {
             compName: "单选框",
             compKey: "BaseRadio"
         }
+    },
+    RadarChart: {
+        componentNode: RadarChart,
+        baseInfo: {
+            compName: "雷达图",
+            compKey: "RadarChart"
+        }
     }
 };