aldehyde 0.2.479 → 0.2.481

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

@@ -1,49 +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;
-            }
-        }
-    }
+.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

@@ -1,198 +1,201 @@
-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>(false); // 是否显示网格
-    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);
-        await renderRef.current.positionTool.positionFit(); // 画布默认自适应居中
-    }
-
-    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;
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { gunzipSync, strFromU8 } from 'fflate';
+import { Spin, theme } 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>(false); // 是否显示网格
+    const [showAttract, setShowAttract] = useState<boolean>(true); // 是否显示磁吸
+    const assetCurrentRef = useRef<Konva.Node>(null); // 当前选中组件Ref
+    const [loading, setLoading] = useState<boolean>(false);
+    const { token: themeToken } = theme.useToken();
+
+    // 获取视图数据
+    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);
+        await renderRef.current.positionTool.positionFit(); // 画布默认自适应居中
+    }
+
+    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,
+            themeToken
+        });
+        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);
+                renderRef.current.positionTool.positionFit();
+            } 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;

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

@@ -1,60 +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;
-    }
+.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;
+    }
 }