aldehyde 0.2.473 → 0.2.475

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

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from "react";
+import { Upload as AntdUpLoad, UploadFile, message } from "antd";
+import { RcFile } from "antd/es/upload";
+import { PlusOutlined } from "@ant-design/icons";
+import { HydrocarbonService, Superagent, ProgramConfig } from "../../../../index";
+import { fileUpload } from "../../constant";
+import { useLocale } from "../../../../locale/useLocale";
+
+const { sourceId, serverKey } = fileUpload;
+
+// 本地文件上传，处理url
+const handleImgUrl = (basePath: string) => {
+    if (basePath.startsWith("http")) {
+        return basePath;
+    }
+    const url = encodeURI(ProgramConfig.joinPath(
+        ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
+        basePath
+    )) +
+        `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode(serverKey)}`;
+    return url;
+}
+
+const fileInfo = {
+    uid: '-1',
+    name: 'image.png',
+    status: 'done',
+};
+
+export interface CommonFilePath {
+    fileName?: string;
+    contentType?: string;//文件类型
+    path?: string;
+    iconPath?: string;
+    valid?: string;
+    baseType?: string;
+    basePath?: string;
+};
+
+
+export interface UploadProps {
+    accept?: string;
+    size?: number;
+    onChange?: (data: { src: string, code: string }) => void;
+    value?: { src: string, code: string };
+    recordCode?: string; // 当前画面关联数据code,用于图片命名区分
+}
+
+const ImageUpload: React.FC<UploadProps> = (props) => {
+    const { onChange, accept, size, recordCode, value } = props;
+    const [fileList, setFileList] = useState([]);
+    const [imgCode, setImgCode] = useState<string>(); // 本地图片code
+    const { translate } = useLocale();
+
+    useEffect(() => {
+        setFileList(value?.src ? [{ ...fileInfo, url: handleImgUrl(value?.src) }] : []);
+        setImgCode(value?.code);
+    }, [value]);
+
+    const beforeUpload = async (file: RcFile) => {
+        if (size && file.size > size * 1024 * 1024) {
+            message.warning(translate("${文件大小不能超过}") + `${size}M`);
+            return false;
+        }
+        return true;
+    }
+
+    const handleChange = async (info) => {
+        if (info.file.status == "done") {
+            const fileKey = info.file.response.fileKey;
+            const fileName = info.file.name;
+            const data = { valid: "new", fileKey, fileName };
+            const result = { 描述: `${recordCode || ""}-${fileName}`, 文件: JSON.stringify(data) };
+            const { code } = await HydrocarbonService.postMstrucDtmplData(serverKey, sourceId, result, message);
+            setImgCode(code);
+            const imgData = await HydrocarbonService.requestMstrucDtmplData(serverKey, sourceId, code, null);
+            const basePath = JSON.parse(imgData.fieldMap["文件"] || "{}").base?.path;
+            if (basePath) {
+                const url = handleImgUrl(basePath);
+                setFileList([{ ...info.file, url }]);
+                // onChange?.(url);
+                onChange?.({ src: url, code });
+            } else {
+                setFileList([...info.fileList]);
+            }
+        } else {
+            setFileList([...info.fileList]);
+        }
+    };
+
+    const handleDelete = async () => {
+        await HydrocarbonService.deleteByCode(serverKey, sourceId, [imgCode]);
+        setFileList([]);
+        onChange?.(null);
+    };
+
+    return (
+        <AntdUpLoad
+            action={(file) => HydrocarbonService.postFileAction(serverKey, file)}
+            headers={Superagent.getHeaderObj(serverKey)}
+            name={'file'}
+            beforeUpload={beforeUpload}
+            listType={'picture-card'}
+            fileList={fileList?.length ? fileList as Array<UploadFile> : undefined}
+            accept={accept}
+            onChange={handleChange}
+            onRemove={handleDelete}
+            onPreview={() => window.open(fileList[0].url)}
+        >
+            {fileList.length > 0 ? null : <div className={'upload-btn'}>
+                <PlusOutlined />
+                <div style={{ marginTop: 8 }}>{translate("${上传图片}")}</div>
+            </div>}
+        </AntdUpLoad>
+    )
+};
+
+export default ImageUpload;

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

@@ -0,0 +1,295 @@
+import React, { useEffect, useMemo, useState } from 'react';
+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: "坐标",
+    isGroup: true,
+    fields: [
+        { title: "X", noStyle: true, id: "x", extControlType: "float", colSpan: 1, style: { width: "100%" } },
+        { title: "Y", noStyle: true, id: "y", extControlType: "float", colSpan: 1, style: { width: "100%" } }
+    ]
+};
+
+// 旋转角度配置
+const rotationSetting = { fields: [{ title: "旋转角度", id: "rotation", extControlType: "int", min: -3600, max: 3600, style: { width: "100%" } }] };
+
+// 基础图形配置(矩形、圆形等)
+const baseGraphSetting = [
+    {
+        fields: [
+            { title: "线条颜色", id: "stroke", extControlType: "color", style: { width: "100%" } },
+            { title: "线宽", id: "strokeWidth", extControlType: "int", min: 0, style: { width: "100%" } },
+            { title: "填充颜色", id: "fill", extControlType: "color", style: { width: "100%" } },
+        ]
+    },
+    positionSetting,
+    rotationSetting
+];
+
+// 线条配置（折线、曲线等）
+const linesSetting = [
+    { title: "线条颜色", id: "stroke", extControlType: "color", style: { width: "100%" } },
+    { title: "线宽", id: "strokeWidth", extControlType: "int", min: 0, style: { width: "100%" } },
+    { title: "开始箭头", id: "arrowStart", extControlType: "yes-no-switch", style: { width: "100%" } },
+    { title: "结束箭头", id: "arrowEnd", extControlType: "yes-no-switch", style: { width: "100%" } }
+];
+
+// 默认画布、组件配置
+const defFormConfig = {
+    pageSetting: [ // 画布
+        {
+            title: "基本信息",
+            groups: [
+                {
+                    title: "画布尺寸",
+                    isGroup: true,
+                    fields: [
+                        { title: "宽", noStyle: true, id: "pageWidth", extControlType: "int", colSpan: 1, min: 0, style: { width: "100%" } },
+                        { title: "高", noStyle: true, id: "pageHeight", extControlType: "int", colSpan: 1, min: 0, style: { width: "100%" } }
+                    ]
+                },
+                {
+                    fields: [
+                        { title: "背景色", id: "background", extControlType: "color", style: { width: "100%" } },
+                        { title: "背景图", id: "backgroundImg", extControlType: "picture", style: { width: "100%" } }
+                    ]
+                }
+            ],
+        }
+    ],
+    linkSetting: [{ title: "基本信息", fields: linesSetting }], // 连线配置
+    Rect: [{ title: "基本信息", groups: baseGraphSetting }],
+    Circle: [{ title: "基本信息", groups: baseGraphSetting }],
+    Bezier: [{ title: "基本信息", groups: [{ fields: linesSetting }, positionSetting] }],
+    Curve: [{ title: "基本信息", groups: [{ fields: linesSetting }, positionSetting] }],
+    Text: [{
+        title: "基本信息",
+        groups: [
+            {
+                fields: [
+                    { 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%" } }
+                ]
+            },
+            positionSetting
+        ]
+    }]
+};
+
+interface Props {
+    pageSettings?: PageSettings; // 画布配置
+    onPageSettingsChange: (s: PageSettings) => void; // 更新画布配置
+    assetCurrent?: Konva.Node; // 当前选中组件 
+    assetSettings?: AssetSettings; // 当前选中组件配置
+    onAssetSettingsChange: (s: AssetSettings) => void; // 更新当前选中组件配置
+    linkCurrent?: Konva.Line; // 当前选中连线
+    linkSettings?: LinkSettings; // 当前选中连线配置
+    onLinkSettingsChange: (s: LinkSettings) => void; // 更新当前选中连线配置
+    recordCode?: string; // 当前画面关联数据code
+}
+
+const Index = (props: 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={{ marginBottom: "12px", paddingInline: "4px" }}>
+                        {handleFormItemType(r.fields)}
+                    </FormItem>;
+                }
+                return handleFormItemType(r.fields, "vertical");
+            });
+        }
+        return handleFormItemType(item.fields, "vertical");
+    }
+
+    // 当前表单配置
+    const currentFormConfig = useMemo(() => {
+        let temFormConfig: any = linkCurrent ? defFormConfig["linkSetting"] : defFormConfig["pageSetting"];
+        if (assetCurrent) {
+            const assetType = assetCurrent.getAttr("assetType");
+            const graphType = assetCurrent.getAttr("graphType");
+            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;
+    }, [assetCurrent, linkCurrent]);
+
+    const fieldGroupList = () => {
+        const renderId = handleFormItemType(baseSetting, "vertical");
+        const items = currentFormConfig?.map((item, index) => ({
+            key: index,
+            label: item.title,
+            children: assetCurrent && item.title === "基本信息" ? [renderId, ...renderFormItem(item)] : renderFormItem(item)
+        }));
+        return <Collapse bordered={false} size="small" defaultActiveKey={[0, 1]} items={items} />;
+    };
+
+    // 更新数据
+    const onValuesChange = (val: { [key: string]: any }) => {
+        const temVal = val;
+        Object.keys(val).forEach((key) => {  // 使用公共表单组件，转换指定类型值
+            const extControlType = formConfigs.find((item: any) => item.id === key)?.extControlType;
+            if (["yes-no-switch"].includes(extControlType)) { // 处理是否转换boolean值
+                temVal[key] = val[key] === "是" ? true : false;
+                return;
+            }
+            if (["float", "int"].includes(extControlType)) { // 处理数字类型转换
+                temVal[key] = Number(val[key] || 0);
+                return;
+            }
+        });
+        if (assetCurrent) { // 当前选中组件
+            onAssetSettingsChange({ ...assetSettings, ...temVal });
+            return;
+        }
+        if (linkCurrent) { // 当前选中连线
+            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, 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;
+            if (["yes-no-switch"].includes(extControlType)) { // 处理是否转换boolean值
+                temVal[key] = temVal[key] === true ? "是" : "否";
+                return;
+            }
+        });
+        const dataSourceConfig = formConfigs.find((item: any) => item.id === "dataSource");
+        if (dataSourceConfig) { // 数据源-无配置设置默认值
+            temVal["dataSource"] = temVal["dataSource"] || dataSourceConfig.defValue;
+        }
+        form.setFieldsValue({ ...temVal, id: nodeId });
+    }
+
+    // 表单数据实时回显更新
+    useEffect(() => {
+        if (formConfigs?.length && formData) {
+            formSetFieldsValue();
+        }
+    }, [formData, formConfigs]);
+
+    return <AntdForm
+        scrollToFirstError={true}
+        labelWrap={true}
+        size="small"
+        form={form}
+        onValuesChange={onValuesChange}
+    // onFinish={onValuesChange}
+    >
+        {fieldGroupList()}
+    </AntdForm>;
+};
+
+export default Index;

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

@@ -0,0 +1,49 @@
+.draw {
+    width: 100%;
+    height: 100%;
+
+    .ant-spin,
+    .ant-spin-container {
+        width: 100%;
+        height: 100%;
+    }
+
+    .draw-main {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    *:focus-visible {
+        outline: none;
+    }
+
+    .draw-content {
+        display: flex;
+        flex-grow: 1;
+
+        .left {
+            overflow: auto;
+            border-right: 1px solid #ccc;
+            flex-shrink: 0;
+        }
+
+        .center {
+            width: 0;
+            flex-grow: 1;
+            background-color: rgba(0, 0, 0, 0.05);
+            z-index: 1;
+        }
+
+        .right {
+            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

@@ -0,0 +1,197 @@
+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';
+import AssetBar from './components/asset-bar';
+import SettingForm from "./components/setting-form";
+import type Konva from 'konva';
+import './index.less';
+
+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); // 渲染器实例
+    const observerRef = useRef<ResizeObserver | null>(null); // 监听尺寸变化
+    const [graphType, setGraphType] = useState<GraphType>(); // 当前画图类型
+    const [pageSettings, setPageSettings] = useState<PageSettings>(); // 画布设置
+    const [assetSettings, setAssetSettings] = useState<AssetSettings>(); // 当前选中组件设置
+    const [linkSettings, setLinkSettings] = useState<LinkSettings>(); // 当前连线设置
+    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) => {
+        if (renderRef.current || !stageRef.current) return;
+        const render = new Render(stageRef.current, {
+            width, height,
+            showBg: true, showRuler: true, showRefLine: true,
+            showPreview: false, showContextmenu: true,
+            attractResize: true, attractBg: true, attractNode: true,
+        });
+        renderRef.current = render;
+        // 初始化设置
+        setPageSettings(render.getPageSettings());
+        // 事件绑定
+        render.on('page-settings-change', setPageSettings); // 监听画布配置变化
+        render.on('selection-change', (nodes: Konva.Node[]) => { // 监听选中组件
+            assetCurrentRef.current = nodes.length === 1 ? nodes[0] : undefined;
+            setAssetCurrent(assetCurrentRef.current);
+            setAssetSettings(nodes.length === 1 ? render.getAssetSettings(nodes[0]) : undefined);
+        });
+        render.on('link-selection-change', (link?: Konva.Line) => { // 监听选中连线
+            setLinkCurrent(link);
+            setLinkSettings(link ? render.getLinkSettings(link) : undefined);
+        });
+        render.on('asset-position-change', (nodes: Konva.Node[]) => { // 监听组件位置变化
+            const node = nodes.find(n => n.id() === assetCurrentRef.current?.id());
+            if (node) {
+                const position = node.position();
+                setAssetSettings(s => s ? { ...s, x: +position.x.toFixed(1), y: +position.y.toFixed(1) } : undefined);
+            }
+        });
+        render.on('asset-rotation-change', (nodes: Konva.Node[]) => { // 监听组件旋转
+            const node = nodes.find(n => n.id() === assetCurrentRef.current?.id());
+            if (node) {
+                const rotation = node.rotation();
+                setAssetSettings(s => s ? { ...s, rotation: +rotation.toFixed(1) } : undefined);
+            }
+        });
+        render.on('texting-change', setTexting); // 监听插入文本状态
+        render.on('graph-type-change', setGraphType); // 监听插入基础图形类型
+    }, []);
+
+    // 监听尺寸变化
+    useEffect(() => {
+        if (!boardRef.current) return;
+        const observer = new ResizeObserver(() => {
+            const { width, height } = boardRef.current.getBoundingClientRect();
+            if (renderRef.current) {
+                renderRef.current.resize(width, height);
+            } else {
+                initRender(width, height);
+            }
+        })
+        observer.observe(boardRef.current);
+        observerRef.current = observer;
+        return () => observer.disconnect();
+    }, [])
+
+    // 更新画布配置
+    const handlePageSetting = (val: { [key: string]: any }) => {
+        if (!(renderRef.current)) {
+            return;
+        }
+        renderRef.current.setPageSettings({ ...pageSettings, ...val }, true);
+    }
+
+    // 更新组件配置
+    const handleAssetSettings = (val: { [key: string]: any }) => {
+        if (!(assetCurrent && renderRef.current)) {
+            return;
+        }
+        setAssetSettings({ ...assetSettings, ...val });
+        renderRef.current.setAssetSettings(assetCurrent, { ...assetSettings, ...val }, true);
+    }
+
+    // 更新连线配置
+    const handleLinkSettings = (val: { [key: string]: any }) => {
+        if (!(linkCurrent && renderRef.current)) {
+            return;
+        }
+        setLinkSettings({ ...linkSettings, ...val });
+        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">
+            <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>
+            </Spin>
+        </div>
+    )
+}
+
+export default Index;