aldehyde 0.2.472 → 0.2.474

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

@@ -0,0 +1,200 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Form as AntdForm, Collapse } from "antd";
+import _ from "lodash";
+import FormItemGroup from "../../../../form/form-Item-group";
+import { PageSettings, AssetSettings, LinkSettings } from '../render/types';
+import type Konva from 'konva';
+
+const FormItem = AntdForm.Item;
+
+// 坐标配置
+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; // 更新当前选中连线配置
+    formConfig?: { [key: string]: any }; // 表单配置
+}
+
+const Index = (props: Props) => {
+    const { pageSettings, onPageSettingsChange, assetCurrent, assetSettings, onAssetSettingsChange, linkCurrent, linkSettings, onLinkSettingsChange, formConfig } = props;
+    const formData = assetCurrent ? assetSettings : (linkCurrent ? linkSettings : pageSettings);
+    const [form] = AntdForm.useForm();
+    const [formConfigs, setFormConfigs] = useState<{ [key: string]: any }>([]);
+
+    // 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} />
+                    </FormItem>;
+                }
+                return <FormItemGroup layout='vertical' fields={r.fields || undefined} valueMap={undefined} />;
+            });
+        }
+        return <FormItemGroup layout='vertical' fields={item.fields || undefined} valueMap={undefined} />;
+    }
+
+    // 当前表单配置
+    const currentFormConfig = useMemo(() => {
+        let temFormConfig = formConfig || (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 configArr = temFormConfig.map(r => r.groups ? r.groups.map(i => i.fields) : r.fields).flat(Infinity);
+        setFormConfigs(configArr);
+        return temFormConfig;
+    }, [formConfig, linkCurrent, assetCurrent]);
+
+    const fieldGroupList = () => {
+        const items = currentFormConfig?.map((item, index) => ({
+            key: index,
+            label: item.title,
+            children: renderFormItem(item)
+        }));
+        return <Collapse bordered={false} size="small" defaultActiveKey={0} 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;
+        }
+        // 默认画布配置
+        onPageSettingsChange({ ...pageSettings, ...temVal });
+    }
+
+    // 表单数据实时回显更新
+    const formSetFieldsValue = () => {
+        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;
+            }
+        });
+        form.setFieldsValue(temVal);
+    }
+
+    // 表单数据实时回显更新
+    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/index.less

@@ -0,0 +1,34 @@
+.draw {
+    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;
+        }
+    }
+}

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

@@ -0,0 +1,138 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+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';
+
+const Index = () => {
+    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 assetCurrentRef = useRef<Konva.Node>(null); // 当前选中组件Ref
+
+    // 初始化渲染器
+    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: true, 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);
+    }
+
+    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}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Index;

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

@@ -141,6 +141,7 @@ export default class FormItemGroup extends React.PureComponent<
     return (
       <FormItem
         label={translate("${" + item.title + "}")}
+        noStyle={item.noStyle || false}
         hidden={item.hidden}
         name={fieldConfig.controlType == "field-history" ? undefined : item[nameAttr]}
         key={item.id}