aldehyde 0.2.516 → 0.2.518

package/src/aldehyde/draw-canvas-edit/components/main-header/index.tsx

@@ -1,264 +1,264 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Dropdown, Modal, Space, Button, Divider, Tooltip, message } from 'antd';
-import { ImportOutlined, ExportOutlined, SaveOutlined, QuestionCircleOutlined, MergeCellsOutlined, NumberOutlined, SettingOutlined } from '@ant-design/icons';
-import { gzipSync, strToU8 } from 'fflate';
-import { uint8ArrayToHex } from 'uint8array-extras';
-import HcserviceV3 from "../../../tmpl/hcservice-v3";
-import IconFont from "../../../icon/aliIcon";
-import { Render } from '../render';
-import { GraphType, LinkType, AlignType } from '../render/types';
-import * as Draws from '../render/draws';
-import UploadReadExcel from "../../../controls/upload-read-excel";
-import './index.less';
-
-// 布局类型
-const alignTypes = [
-  { label: '垂直居中', value: 'Middle', icon: "icon-middle-L" },
-  { label: '左对齐', value: 'Left', icon: "icon-left-L" },
-  { label: '右对齐', value: 'Right', icon: "icon-right-L" },
-  { label: '水平居中', value: 'Center', icon: "icon-center-L" },
-  { label: '上对齐', value: 'Top', icon: "icon-top-L" },
-  { label: '下对齐', value: 'Bottom', icon: "icon-bottom-L" }
-];
-
-// 连线类型
-const lineTypes = [
-  { label: '折线', value: 'curve', icon: "icon-zhexian" },
-  { label: '贝塞尔曲线', value: 'bezier', icon: "icon-bezier" },
-  { label: '自动', value: 'auto', icon: "icon-zhexian-auto" },
-];
-
-// 图形类型
-const graphTypes = [
-  { label: '折线', value: 'Curve', icon: "icon-zhexian" },
-  { label: '贝塞尔曲线', value: 'Bezier', icon: "icon-bezier" },
-  { label: '矩形', value: 'Rect', icon: 'icon-rect' },
-  { label: '圆', value: 'Circle', icon: 'icon-circle' },
-];
-
-interface MainHeaderProps {
-  render: Render | null;
-  graphType?: GraphType; // 图类型
-  texting?: boolean; // 添加文本状态
-  showGrid?: boolean; // 显示网格
-  showAttract?: boolean; // 显示磁吸
-  onGraphTypeChange: (type: GraphType | undefined) => void; // 更新图类型
-  onTexting: (texting: boolean) => void;
-  setShowGrid?: (show: boolean) => void;
-  setShowAttract?: (show: boolean) => void;
-  recordCode: string;
-}
-
-const MainHeader = (props: MainHeaderProps) => {
-  const { render, graphType, onGraphTypeChange, onTexting, texting, recordCode, showGrid, setShowGrid, showAttract, setShowAttract } = props;
-  const [scale, setScale] = useState<number>(100); // 缩放
-  const [history, setHistory] = useState<string[]>([]); // 历史记录
-  const [historyIndex, setHistoryIndex] = useState(-1); // 当前历史记录标签
-  const [selection, setSelection] = useState<unknown[]>([]); // 选中组件
-  const [currentLinkType, setCurrentLinkType] = useState<LinkType>("curve"); // 连接线类型
-  const [showShortCut, setShowShortCut] = useState<boolean>(false); // 快捷键显示
-  const [loading, setLoading] = useState<boolean>(false);
-
-  // 文件导入
-  const handleRestore = useCallback(() => {
-    if (!render) return;
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.json';
-    input.onchange = () => {
-      const file = input.files?.[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onload = async () => {
-          await render.importExportTool.restore(reader.result as string);
-          render.positionTool.positionFit();
-        }
-        reader.readAsText(file);
-      }
-    }
-    input.click();
-  }, [render]);
-
-  // 批量设置组件属性
-  const handleBatchSetNodeConfig = useCallback((data: { [key: string]: any }[]) => {
-    if (!render || !data?.length) return;
-    const allAssets = render.getAllAssets();
-    data.forEach((item) => {
-      let nodeId, setting;
-      switch (item["组件类型"]) {
-        case "workstation":
-          const order = item["序号"];
-          const workstationNumber = item["工位编号"];
-          nodeId = allAssets.find((asset) => asset.componentType === "workstation" && asset.settings.order === order)?.id;
-          setting = { workstationNumber };
-          break;
-        default:
-          break;
-      }
-      if (nodeId) {
-        render.updateAssetById(nodeId, setting);
-      }
-    });
-    message.success("设置成功");
-  }, [render]);
-
-  // 保存
-  const handleSave = async () => {
-    if (!recordCode) {
-      return;
-    }
-    setLoading(true);
-    const data = render.importExportTool.save();
-    // 1. 将普通字符串转换为 Uint8Array
-    const dataBuffer = strToU8(data);
-    // 2. 压缩为 ByteArray
-    const content = gzipSync(dataBuffer, { level: 9 });
-    // 3. 将 Uint8Array 转为 16进制字符串
-    const hexString = uint8ArrayToHex(content);
-    await HcserviceV3.postDiagram2DConfig(recordCode, hexString);
-    setLoading(false);
-  }
-
-  // 数据导出
-  const handleExport = useCallback((type: 'json' | 'svg' | 'asset' | 'png' | 'assetPng', action?: "save" | "download") => {
-    if (!render) return;
-    switch (type) {
-      case 'json':
-        if (action === "save") {
-          handleSave();
-        } else {
-          download("data.json", render.importExportTool.save());
-        }
-        return;
-      case 'asset':
-        download("asset.json", render.importExportTool.getAsset());
-        return;
-      case 'png':
-        download('image.png', render.importExportTool.getAssetImage(2));
-        return;
-      case 'assetPng':
-        download('image.png', render.importExportTool.getAssetImage());
-        return;
-    }
-  }, [render]);
-
-  // 下载辅助函数
-  const download = (name: string, content: string) => {
-    const a = document.createElement('a');
-    a.download = name;
-    a.href = content.startsWith('blob:') ? content : URL.createObjectURL(new Blob([content]));
-    a.click();
-  }
-
-  // 工具操作
-  const handleAlign = useCallback((type: AlignType) => {
-    render?.alignTool.align(type);
-  }, [render])
-
-  // 更改组件连接线类型 
-  const handleLinkType = useCallback((type: LinkType) => {
-    (render?.draws[Draws.LinkDraw.NAME] as unknown as { changeLinkType: (t: LinkType) => void })?.changeLinkType(type);
-  }, [render])
-
-  // 重置缩放
-  const handleScale = useCallback((action: 'fit' | 'reset' | 'position') => {
-    const tool = render?.positionTool;
-    if (!tool) return;
-    action === 'fit' ? tool.positionFit() : action === 'reset' ? tool.positionZoomReset() : tool.positionReset();
-  }, [render])
-
-  // 更改图类型
-  const handleGraph = (type: GraphType) => onGraphTypeChange(graphType === type ? undefined : type);
-
-  // 绑定事件
-  useEffect(() => {
-    if (!render) return;
-    render.on('selection-change', setSelection);
-    render.on('history-change', ({ records, index }: { records: string[]; index: number }) => {
-      setHistory(records);
-      setHistoryIndex(index);
-    });
-    render.on('link-type-change', setCurrentLinkType);
-    render.on('scale-change', (v: number) => setScale(v * 100));
-    render.on('loading', setLoading);
-  }, [render]);
-
-  // 是否选中多个组件
-  const isSelects = useMemo(() => selection.length <= 1, [selection]);
-
-  // 缩放菜单选项
-  const scaleMenu = [
-    { key: "fit", label: <a onClick={() => handleScale('fit')}>自适应</a> },
-    { key: "reset", label: <a onClick={() => handleScale('reset')}>重置位置及缩放</a> },
-    { key: "position", label: <a onClick={() => handleScale('position')}>仅重置位置</a> }
-  ];
-
-  return (
-    <div className="main-header">
-      <Space size={4} separator={<Divider vertical styles={{ root: { margin: "0 4px" } }} />}>
-        <Dropdown menu={{ items: scaleMenu }}>
-          <span style={{ cursor: "pointer" }}>{`${scale.toFixed(0)}%`}</span>
-        </Dropdown>
-        <Tooltip title="撤销">
-          <Button type="text" onClick={() => render?.prevHistory()} disabled={historyIndex <= 0} >↶</Button>
-        </Tooltip>
-        <Tooltip title="恢复">
-          <Button type="text" onClick={() => render?.nextHistory()} disabled={historyIndex >= history.length - 1} >↷</Button>
-        </Tooltip>
-        {alignTypes.map(type => (
-          <Tooltip title={type.label}>
-            <Button type="text" key={type.value} onClick={() => handleAlign(type.value as AlignType)} disabled={isSelects} ><IconFont type={type.icon} /></Button>
-          </Tooltip>
-        ))}
-        {lineTypes.map(type => (
-          <Tooltip title={`连接线：${type.label}`}>
-            <Button type="text" key={type.value} onClick={() => handleLinkType(type.value as LinkType)} disabled={currentLinkType === type.value}><IconFont type={type.icon} /></Button>
-          </Tooltip>
-        ))}
-        {graphTypes.map(type => (
-          <Tooltip title={`画${type.label}`}>
-            <Button type="text" key={type.value} onClick={() => handleGraph(type.value as GraphType)} className={graphType === type.value ? 'active' : ''} ><IconFont type={type.icon} /></Button>
-          </Tooltip>
-        ))}
-        <Tooltip title="插入文字">
-          <Button type="text" onClick={() => onTexting(true)} className={texting ? "active" : ""} ><IconFont type="icon-wenben" /></Button>
-        </Tooltip>
-        <Tooltip title="网格">
-          <Button type="text" onClick={() => setShowGrid(!showGrid)} className={showGrid ? "active" : ""} ><NumberOutlined /></Button>
-        </Tooltip>
-        <Tooltip title="磁吸">
-          <Button type="text" onClick={() => setShowAttract(!showAttract)} className={showAttract ? "active" : ""} ><MergeCellsOutlined /></Button>
-        </Tooltip>
-      </Space>
-      <Space size={4} separator={<Divider vertical styles={{ root: { margin: "0 4px" } }} />}>
-        <Tooltip title="快捷键">
-          <Button type="text" onClick={() => setShowShortCut(true)} ><QuestionCircleOutlined /></Button>
-        </Tooltip>
-        <Tooltip title="组件属性批量配置">
-          <>
-            <UploadReadExcel onChangeData={handleBatchSetNodeConfig} >
-              <Button type="text" ><SettingOutlined /></Button>
-            </UploadReadExcel>
-          </>
-        </Tooltip>
-        <Tooltip title="导入">
-          <Button type="text" onClick={handleRestore} ><ImportOutlined /></Button>
-        </Tooltip>
-        <Tooltip title="导出">
-          <Button type="text" onClick={() => handleExport("json")} ><ExportOutlined /></Button>
-        </Tooltip>
-        <Tooltip title="保存">
-          <Button loading={loading} type="text" onClick={() => handleExport("json", "save")} ><SaveOutlined /></Button>
-        </Tooltip>
-      </Space>
-      {showShortCut &&
-        <Modal title="快捷键" width={600} footer={null} open={showShortCut} onCancel={() => setShowShortCut(false)}>
-          <p>1、复制、粘贴、多选、全选、删除、上一步、下一步等快捷键与一般文档编辑器类似；</p>
-          <p>2、放大缩小，【Win】鼠标上滚动下滚动，【Mac】触控板双指放大、缩小；</p>
-          <p>3、画布拖动，在空白处，【Win】右键按下移动，【Mac】control + 触控板三指移动；</p>
-        </Modal>}
-    </div >
-  )
-}
-
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Dropdown, Modal, Space, Button, Divider, Tooltip, message } from 'antd';
+import { ImportOutlined, ExportOutlined, SaveOutlined, QuestionCircleOutlined, MergeCellsOutlined, NumberOutlined, SettingOutlined } from '@ant-design/icons';
+import { gzipSync, strToU8 } from 'fflate';
+import { uint8ArrayToHex } from 'uint8array-extras';
+import HcserviceV3 from "../../../tmpl/hcservice-v3";
+import IconFont from "../../../icon/aliIcon";
+import { Render } from '../render';
+import { GraphType, LinkType, AlignType } from '../render/types';
+import * as Draws from '../render/draws';
+import UploadReadExcel from "../../../controls/upload-read-excel";
+import './index.less';
+
+// 布局类型
+const alignTypes = [
+  { label: '垂直居中', value: 'Middle', icon: "icon-middle-L" },
+  { label: '左对齐', value: 'Left', icon: "icon-left-L" },
+  { label: '右对齐', value: 'Right', icon: "icon-right-L" },
+  { label: '水平居中', value: 'Center', icon: "icon-center-L" },
+  { label: '上对齐', value: 'Top', icon: "icon-top-L" },
+  { label: '下对齐', value: 'Bottom', icon: "icon-bottom-L" }
+];
+
+// 连线类型
+const lineTypes = [
+  { label: '折线', value: 'curve', icon: "icon-zhexian" },
+  { label: '贝塞尔曲线', value: 'bezier', icon: "icon-bezier" },
+  { label: '自动', value: 'auto', icon: "icon-zhexian-auto" },
+];
+
+// 图形类型
+const graphTypes = [
+  { label: '折线', value: 'Curve', icon: "icon-zhexian" },
+  { label: '贝塞尔曲线', value: 'Bezier', icon: "icon-bezier" },
+  { label: '矩形', value: 'Rect', icon: 'icon-rect' },
+  { label: '圆', value: 'Circle', icon: 'icon-circle' },
+];
+
+interface MainHeaderProps {
+  render: Render | null;
+  graphType?: GraphType; // 图类型
+  texting?: boolean; // 添加文本状态
+  showGrid?: boolean; // 显示网格
+  showAttract?: boolean; // 显示磁吸
+  onGraphTypeChange: (type: GraphType | undefined) => void; // 更新图类型
+  onTexting: (texting: boolean) => void;
+  setShowGrid?: (show: boolean) => void;
+  setShowAttract?: (show: boolean) => void;
+  recordCode: string;
+}
+
+const MainHeader = (props: MainHeaderProps) => {
+  const { render, graphType, onGraphTypeChange, onTexting, texting, recordCode, showGrid, setShowGrid, showAttract, setShowAttract } = props;
+  const [scale, setScale] = useState<number>(100); // 缩放
+  const [history, setHistory] = useState<string[]>([]); // 历史记录
+  const [historyIndex, setHistoryIndex] = useState(-1); // 当前历史记录标签
+  const [selection, setSelection] = useState<unknown[]>([]); // 选中组件
+  const [currentLinkType, setCurrentLinkType] = useState<LinkType>("curve"); // 连接线类型
+  const [showShortCut, setShowShortCut] = useState<boolean>(false); // 快捷键显示
+  const [loading, setLoading] = useState<boolean>(false);
+
+  // 文件导入
+  const handleRestore = useCallback(() => {
+    if (!render) return;
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json';
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = async () => {
+          await render.importExportTool.restore(reader.result as string);
+          render.positionTool.positionFit();
+        }
+        reader.readAsText(file);
+      }
+    }
+    input.click();
+  }, [render]);
+
+  // 批量设置组件属性
+  const handleBatchSetNodeConfig = useCallback((data: { [key: string]: any }[]) => {
+    if (!render || !data?.length) return;
+    const allAssets = render.getAllAssets();
+    data.forEach((item) => {
+      let nodeId, setting;
+      switch (item["组件类型"]) {
+        case "workstation":
+          const order = item["序号"];
+          const workstationNumber = item["工位编号"];
+          nodeId = allAssets.find((asset) => asset.componentType === "workstation" && asset.settings.order === order)?.id;
+          setting = { workstationNumber };
+          break;
+        default:
+          break;
+      }
+      if (nodeId) {
+        render.updateAssetById(nodeId, setting);
+      }
+    });
+    message.success("设置成功");
+  }, [render]);
+
+  // 保存
+  const handleSave = async () => {
+    if (!recordCode) {
+      return;
+    }
+    setLoading(true);
+    const data = render.importExportTool.save();
+    // 1. 将普通字符串转换为 Uint8Array
+    const dataBuffer = strToU8(data);
+    // 2. 压缩为 ByteArray
+    const content = gzipSync(dataBuffer, { level: 9 });
+    // 3. 将 Uint8Array 转为 16进制字符串
+    const hexString = uint8ArrayToHex(content);
+    await HcserviceV3.postDiagram2DConfig(recordCode, hexString);
+    setLoading(false);
+  }
+
+  // 数据导出
+  const handleExport = useCallback((type: 'json' | 'svg' | 'asset' | 'png' | 'assetPng', action?: "save" | "download") => {
+    if (!render) return;
+    switch (type) {
+      case 'json':
+        if (action === "save") {
+          handleSave();
+        } else {
+          download("data.json", render.importExportTool.save());
+        }
+        return;
+      case 'asset':
+        download("asset.json", render.importExportTool.getAsset());
+        return;
+      case 'png':
+        download('image.png', render.importExportTool.getAssetImage(2));
+        return;
+      case 'assetPng':
+        download('image.png', render.importExportTool.getAssetImage());
+        return;
+    }
+  }, [render]);
+
+  // 下载辅助函数
+  const download = (name: string, content: string) => {
+    const a = document.createElement('a');
+    a.download = name;
+    a.href = content.startsWith('blob:') ? content : URL.createObjectURL(new Blob([content]));
+    a.click();
+  }
+
+  // 工具操作
+  const handleAlign = useCallback((type: AlignType) => {
+    render?.alignTool.align(type);
+  }, [render])
+
+  // 更改组件连接线类型 
+  const handleLinkType = useCallback((type: LinkType) => {
+    (render?.draws[Draws.LinkDraw.NAME] as unknown as { changeLinkType: (t: LinkType) => void })?.changeLinkType(type);
+  }, [render])
+
+  // 重置缩放
+  const handleScale = useCallback((action: 'fit' | 'reset' | 'position') => {
+    const tool = render?.positionTool;
+    if (!tool) return;
+    action === 'fit' ? tool.positionFit() : action === 'reset' ? tool.positionZoomReset() : tool.positionReset();
+  }, [render])
+
+  // 更改图类型
+  const handleGraph = (type: GraphType) => onGraphTypeChange(graphType === type ? undefined : type);
+
+  // 绑定事件
+  useEffect(() => {
+    if (!render) return;
+    render.on('selection-change', setSelection);
+    render.on('history-change', ({ records, index }: { records: string[]; index: number }) => {
+      setHistory(records);
+      setHistoryIndex(index);
+    });
+    render.on('link-type-change', setCurrentLinkType);
+    render.on('scale-change', (v: number) => setScale(v * 100));
+    render.on('loading', setLoading);
+  }, [render]);
+
+  // 是否选中多个组件
+  const isSelects = useMemo(() => selection.length <= 1, [selection]);
+
+  // 缩放菜单选项
+  const scaleMenu = [
+    { key: "fit", label: <a onClick={() => handleScale('fit')}>自适应</a> },
+    { key: "reset", label: <a onClick={() => handleScale('reset')}>重置位置及缩放</a> },
+    { key: "position", label: <a onClick={() => handleScale('position')}>仅重置位置</a> }
+  ];
+
+  return (
+    <div className="main-header">
+      <Space size={4} separator={<Divider vertical styles={{ root: { margin: "0 4px" } }} />}>
+        <Dropdown menu={{ items: scaleMenu }}>
+          <span style={{ cursor: "pointer" }}>{`${scale.toFixed(0)}%`}</span>
+        </Dropdown>
+        <Tooltip title="撤销">
+          <Button type="text" onClick={() => render?.prevHistory()} disabled={historyIndex <= 0} >↶</Button>
+        </Tooltip>
+        <Tooltip title="恢复">
+          <Button type="text" onClick={() => render?.nextHistory()} disabled={historyIndex >= history.length - 1} >↷</Button>
+        </Tooltip>
+        {alignTypes.map(type => (
+          <Tooltip title={type.label}>
+            <Button type="text" key={type.value} onClick={() => handleAlign(type.value as AlignType)} disabled={isSelects} ><IconFont type={type.icon} /></Button>
+          </Tooltip>
+        ))}
+        {lineTypes.map(type => (
+          <Tooltip title={`连接线：${type.label}`}>
+            <Button type="text" key={type.value} onClick={() => handleLinkType(type.value as LinkType)} disabled={currentLinkType === type.value}><IconFont type={type.icon} /></Button>
+          </Tooltip>
+        ))}
+        {graphTypes.map(type => (
+          <Tooltip title={`画${type.label}`}>
+            <Button type="text" key={type.value} onClick={() => handleGraph(type.value as GraphType)} className={graphType === type.value ? 'active' : ''} ><IconFont type={type.icon} /></Button>
+          </Tooltip>
+        ))}
+        <Tooltip title="插入文字">
+          <Button type="text" onClick={() => onTexting(true)} className={texting ? "active" : ""} ><IconFont type="icon-wenben" /></Button>
+        </Tooltip>
+        <Tooltip title="网格">
+          <Button type="text" onClick={() => setShowGrid(!showGrid)} className={showGrid ? "active" : ""} ><NumberOutlined /></Button>
+        </Tooltip>
+        <Tooltip title="磁吸">
+          <Button type="text" onClick={() => setShowAttract(!showAttract)} className={showAttract ? "active" : ""} ><MergeCellsOutlined /></Button>
+        </Tooltip>
+      </Space>
+      <Space size={4} separator={<Divider vertical styles={{ root: { margin: "0 4px" } }} />}>
+        <Tooltip title="快捷键">
+          <Button type="text" onClick={() => setShowShortCut(true)} ><QuestionCircleOutlined /></Button>
+        </Tooltip>
+        <Tooltip title="组件属性批量配置">
+          <>
+            <UploadReadExcel onChangeData={handleBatchSetNodeConfig} >
+              <Button type="text" ><SettingOutlined /></Button>
+            </UploadReadExcel>
+          </>
+        </Tooltip>
+        <Tooltip title="导入">
+          <Button type="text" onClick={handleRestore} ><ImportOutlined /></Button>
+        </Tooltip>
+        <Tooltip title="导出">
+          <Button type="text" onClick={() => handleExport("json")} ><ExportOutlined /></Button>
+        </Tooltip>
+        <Tooltip title="保存">
+          <Button loading={loading} type="text" onClick={() => handleExport("json", "save")} ><SaveOutlined /></Button>
+        </Tooltip>
+      </Space>
+      {showShortCut &&
+        <Modal title="快捷键" width={600} footer={null} open={showShortCut} onCancel={() => setShowShortCut(false)}>
+          <p>1、复制、粘贴、多选、全选、删除、上一步、下一步等快捷键与一般文档编辑器类似；</p>
+          <p>2、放大缩小，【Win】鼠标上滚动下滚动，【Mac】触控板双指放大、缩小；</p>
+          <p>3、画布拖动，在空白处，【Win】右键按下移动，【Mac】control + 触控板三指移动；</p>
+        </Modal>}
+    </div >
+  )
+}
+
 export default MainHeader;

package/src/aldehyde/draw-canvas-edit/components/render/draws/index.ts

@@ -1,7 +1,7 @@
-export { BgDraw } from './bg-draw';
-export { RulerDraw } from './ruler-draw';
-export { RefLineDraw } from './ref-line-draw';
-export { ContextmenuDraw } from './contextmenu-draw';
-export { PreviewDraw } from './preview-draw';
-export { LinkDraw } from './link-draw';
-export { GraphDraw } from './graph-draw';
+export { BgDraw } from './bg-draw';
+export { RulerDraw } from './ruler-draw';
+export { RefLineDraw } from './ref-line-draw';
+export { ContextmenuDraw } from './contextmenu-draw';
+export { PreviewDraw } from './preview-draw';
+export { LinkDraw } from './link-draw';
+export { GraphDraw } from './graph-draw';