aldehyde 0.2.474 → 0.2.475

package/src/aldehyde/draw-canvas/edit/components/setting-form/index.tsx

@@ -1,12 +1,24 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Form as AntdForm, Collapse } from "antd";
+import { Form as AntdForm, Collapse, Row, Col } from "antd";
 import _ from "lodash";
 import FormItemGroup from "../../../../form/form-Item-group";
+import { FieldConfig } from "../../../../tmpl/interface";
 import { PageSettings, AssetSettings, LinkSettings } from '../render/types';
 import type Konva from 'konva';
+import { ProgramConfig } from "../../../../index";
+import { useLocale } from "../../../../locale/useLocale";
+import ImageUpload from "./imag-upload";
 
 const FormItem = AntdForm.Item;
 
+// 基本配置
+const baseSetting = [
+    { title: "ID", id: "id", extControlType: "text", disabled: true, style: { width: "100%" } },
+];
+
+// 数据源配置
+const defDataSourceSetting = { title: "数据源", id: "dataSource", extControlType: "select", options: [], style: { width: "100%" } };
+
 // 坐标配置
 const positionSetting = {
     title: "坐标",
@@ -74,9 +86,9 @@ const defFormConfig = {
         groups: [
             {
                 fields: [
-                    { title: "文本", id: "text", extControlType: "textarea", style: { width: "100%" } },
+                    { title: "默认文本", id: "text", extControlType: "textarea", style: { width: "100%" } },
                     { title: "文本颜色", id: "textFill", extControlType: "color", style: { width: "100%" } },
-                    { title: "字体大小", id: "fontSize", extControlType: "int", min: 1, style: { width: "100%" } },
+                    { title: "字体大小", id: "fontSize", extControlType: "int", min: 1, style: { width: "100%" } }
                 ]
             },
             positionSetting
@@ -93,50 +105,120 @@ interface Props {
     linkCurrent?: Konva.Line; // 当前选中连线
     linkSettings?: LinkSettings; // 当前选中连线配置
     onLinkSettingsChange: (s: LinkSettings) => void; // 更新当前选中连线配置
-    formConfig?: { [key: string]: any }; // 表单配置
+    recordCode?: string; // 当前画面关联数据code
 }
 
 const Index = (props: Props) => {
-    const { pageSettings, onPageSettingsChange, assetCurrent, assetSettings, onAssetSettingsChange, linkCurrent, linkSettings, onLinkSettingsChange, formConfig } = props;
+    const { pageSettings, onPageSettingsChange, assetCurrent, assetSettings, onAssetSettingsChange, linkCurrent, linkSettings, onLinkSettingsChange, recordCode } = props;
     const formData = assetCurrent ? assetSettings : (linkCurrent ? linkSettings : pageSettings);
     const [form] = AntdForm.useForm();
     const [formConfigs, setFormConfigs] = useState<{ [key: string]: any }>([]);
+    const { translate } = useLocale();
+
+    // 自定义表单项
+    const customFormItem = (items: { [key: string]: any }[], layout?: "vertical" | "horizontal") => {
+        const entryControls = items.map(item => {
+            const { extControlType } = item || {};
+            if (!extControlType) {
+                return null;
+            }
+            let entryControl;
+            switch (extControlType) {
+                case "picture":
+                    entryControl = <ImageUpload recordCode={recordCode} />;
+                    break;
+                default:
+                    break;
+            }
+            if (!entryControl) {
+                return null;
+            }
+            const colSpan = item.colSpan || 2;
+            return <Col key={item.id} span={12 * colSpan} style={{ width: "stretch" }}>
+                <FormItem
+                    layout={layout}
+                    label={translate("${" + item.title + "}")}
+                    noStyle={item.noStyle || false}
+                    hidden={item.hidden}
+                    name={item.id}
+                    key={item.id}
+                    labelCol={{ span: 24 }}
+                    wrapperCol={{ span: 24 }}
+                    tooltip={!item.tip ? undefined : item.tip}
+                    style={{ margin: "4px 4px 12px" }}
+                >{entryControl}</FormItem>
+            </Col>;
+        }).filter(Boolean);
+        return <Row gutter={[16, 0]} key={1}>{entryControls}</Row>;
+    }
+
+    // 处理表单组件使用公共组件or自定义组件
+    const handleFormItemType = (fields: FieldConfig[], layout?: "vertical" | "horizontal") => {
+        const customTypes = ["picture"]; // 自定义组件类型
+        const temArr = fields?.reduce((total, item) => {
+            const isCustom = customTypes.includes(item.extControlType || "");
+            const lastItem = total[total.length - 1];
+            if (lastItem && ((lastItem.type === "custom" && isCustom) || (lastItem.type === "default" && !isCustom))) {
+                lastItem.fields.push(item);
+                total[total.length - 1] = lastItem;
+            } else {
+                total.push({ type: isCustom ? "custom" : "default", fields: [item] });
+            }
+            return total;
+        }, []) || [];
+        return temArr.map(item => item.type === "default" ? <FormItemGroup layout={layout} fields={item.fields || undefined} valueMap={undefined} /> : customFormItem(item.fields, layout));
+    }
 
     // FormItem渲染
     const renderFormItem = (item: { [key: string]: any }) => {
         if (item.groups) {
             return item.groups.map(r => {
                 if (r?.isGroup) { // 表单分组显示
-                    return <FormItem label={r.title} layout='vertical' style={{ margin: "12px 0", paddingInline: "8px" }}>
-                        <FormItemGroup fields={r.fields || undefined} valueMap={undefined} />
+                    return <FormItem label={r.title} layout='vertical' style={{ marginBottom: "12px", paddingInline: "4px" }}>
+                        {handleFormItemType(r.fields)}
                     </FormItem>;
                 }
-                return <FormItemGroup layout='vertical' fields={r.fields || undefined} valueMap={undefined} />;
+                return handleFormItemType(r.fields, "vertical");
             });
         }
-        return <FormItemGroup layout='vertical' fields={item.fields || undefined} valueMap={undefined} />;
+        return handleFormItemType(item.fields, "vertical");
     }
 
     // 当前表单配置
     const currentFormConfig = useMemo(() => {
-        let temFormConfig = formConfig || (linkCurrent ? defFormConfig["linkSetting"] : defFormConfig["pageSetting"]);
+        let temFormConfig: any = linkCurrent ? defFormConfig["linkSetting"] : defFormConfig["pageSetting"];
         if (assetCurrent) {
             const assetType = assetCurrent.getAttr("assetType");
             const graphType = assetCurrent.getAttr("graphType");
-            temFormConfig = defFormConfig[assetType === "Text" ? "Text" : graphType] || temFormConfig;
+            const componentType = assetCurrent.getAttr("componentType"); // 组件类型-用于匹配表单等
+            temFormConfig = defFormConfig[assetType === "Text" ? "Text" : graphType];
+            if (!temFormConfig) { // 默认表单不存在配置则获取组件中的表单配置
+                const currentItem: any = ProgramConfig.get2DComponentByType(componentType);
+                const { config, dataSource, alterDataSources } = currentItem || {};
+                temFormConfig = JSON.parse(config || "[]");
+                if (dataSource || alterDataSources) { // 数据源配置
+                    const temArr = [dataSource, ...(alterDataSources || [])].filter(Boolean).map(r => {
+                        const [key, label] = r.split("@R@");
+                        return { label, value: key };
+                    });
+                    const dataSourceSetting = { title: "数据", fields: [{ ...defDataSourceSetting, options: temArr, defValue: dataSource ? temArr[0]?.value : undefined }] };
+                    temFormConfig = [dataSourceSetting, ...temFormConfig];
+                }
+            }
         }
         const configArr = temFormConfig.map(r => r.groups ? r.groups.map(i => i.fields) : r.fields).flat(Infinity);
         setFormConfigs(configArr);
         return temFormConfig;
-    }, [formConfig, linkCurrent, assetCurrent]);
+    }, [assetCurrent, linkCurrent]);
 
     const fieldGroupList = () => {
+        const renderId = handleFormItemType(baseSetting, "vertical");
         const items = currentFormConfig?.map((item, index) => ({
             key: index,
             label: item.title,
-            children: renderFormItem(item)
+            children: assetCurrent && item.title === "基本信息" ? [renderId, ...renderFormItem(item)] : renderFormItem(item)
         }));
-        return <Collapse bordered={false} size="small" defaultActiveKey={0} items={items} />;
+        return <Collapse bordered={false} size="small" defaultActiveKey={[0, 1]} items={items} />;
     };
 
     // 更新数据
@@ -161,12 +243,21 @@ const Index = (props: Props) => {
             onLinkSettingsChange({ ...linkSettings, ...temVal });
             return;
         }
+        // 画布背景图片颜色-只能设置一个
+        let background = pageSettings.background;
+        let backgroundImg = pageSettings.backgroundImg;
+        if (val.background || val.backgroundImg) {
+            background = null;
+            backgroundImg = null;
+        }
+        form.setFieldsValue({ background, backgroundImg, ...temVal });
         // 默认画布配置
-        onPageSettingsChange({ ...pageSettings, ...temVal });
+        onPageSettingsChange({ ...pageSettings, background, backgroundImg, ...temVal });
     }
 
     // 表单数据实时回显更新
     const formSetFieldsValue = () => {
+        const nodeId = assetCurrent?.getAttr("id");
         const temVal = _.cloneDeep(formData);
         Object.keys(temVal).forEach((key) => {  // 使用公共表单组件，转换指定类型值
             const extControlType = formConfigs.find((item: any) => item.id === key)?.extControlType;
@@ -175,7 +266,11 @@ const Index = (props: Props) => {
                 return;
             }
         });
-        form.setFieldsValue(temVal);
+        const dataSourceConfig = formConfigs.find((item: any) => item.id === "dataSource");
+        if (dataSourceConfig) { // 数据源-无配置设置默认值
+            temVal["dataSource"] = temVal["dataSource"] || dataSourceConfig.defValue;
+        }
+        form.setFieldsValue({ ...temVal, id: nodeId });
     }
 
     // 表单数据实时回显更新

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

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

package/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/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,114 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import { Space, Button } from "antd";
+import { ExpandOutlined } from '@ant-design/icons';
+import { Render } from '../edit/components/render';
+import './index.less';
+
+interface ViewerProps {
+  data?: string; // 画布 JSON 数据 
+  width?: number | string;
+  height?: number | string;
+}
+
+const Index: React.FC<ViewerProps> = (props) => {
+  const { data, width = '100%', height = '100%' } = props;
+  const boardRef = useRef<HTMLDivElement>(null);
+  const stageRef = useRef<HTMLDivElement>(null);
+  const renderRef = useRef<Render | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
+
+  // 初始化渲染器（只读模式）
+  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 loadData = useCallback(async (render: Render, jsonData: string) => {
+    try {
+      await render.importExportTool.restore(jsonData);
+      // 数据加载完成后自适应居中
+      render.positionTool.positionFit();
+    } 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>
     );