aldehyde 0.2.474 → 0.2.475

package/src/aldehyde/controls/text/index.less

@@ -4,4 +4,5 @@
     text-overflow: ellipsis;
     width: fit-content;
     max-width: 100%;
+    min-width: 100%;
 }

package/src/aldehyde/controls/view-control.tsx

@@ -147,6 +147,7 @@ function renderControl(
       case "textarea":
       case "text-view":
       case "preselect":
+      case "scan-code":
         if (holderType == "table") {
           viewControl = (
             <EllipsisText

package/src/aldehyde/detail/button/edit-button.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "antd";
+import { Button, Tooltip } from "antd";
 import { DoEditParam, DtmplData, LtmplConfig } from "../../tmpl/interface";
 import { EditOutlined } from "@ant-design/icons";
 import ActionUtils from "../../controls/action/utils";
@@ -13,26 +13,23 @@ interface EditButtonProps {
 
 const EditButton: React.FC<EditButtonProps> = (props) => {
   const { doEdit, data, ltmplConfig } = props;
+  const { classEditConfigs, buttonEditAction, editBtnTitle } = ltmplConfig || {};
   let button = undefined;
-  if (ltmplConfig.classEditConfigs) {
-    ltmplConfig.classEditConfigs.forEach((classEditConfig) => {
+  if (classEditConfigs) {
+    classEditConfigs.forEach((classEditConfig) => {
       if (
         !button &&
         ActionUtils.isShow(classEditConfig.preposes, [data], undefined)
       ) {
+        const btnProps: any = {
+          size: "small",
+          type: "dashed",
+          onClick: () => doEdit({ code: data.code, mode: "update", dtmplSourceId: classEditConfig.id })
+        };
         button = (
-          <Button
-            size="small"
-            type="dashed"
-            icon={<EditOutlined />}
-            onClick={() =>
-              doEdit({
-                code: data.code,
-                mode: "update",
-                dtmplSourceId: classEditConfig.id,
-              })
-            }
-          ></Button>
+          (!editBtnTitle || editBtnTitle?.length < 4) ?
+            <Button {...btnProps}>{editBtnTitle || <EditOutlined />}</Button> :
+            <Tooltip title={editBtnTitle}><Button {...btnProps} icon={<EditOutlined />} /></Tooltip>
         );
       }
     });
@@ -42,18 +39,20 @@ const EditButton: React.FC<EditButtonProps> = (props) => {
   if (
     !button &&
     ActionUtils.isShow(
-      ltmplConfig.buttonEditAction?.preposes,
+      buttonEditAction?.preposes,
       [data],
       undefined
     )
   ) {
+    const btnProps: any = {
+      size: "small",
+      type: "dashed",
+      onClick: () => doEdit({ code: data.code, mode: "update" })
+    };
     button = (
-      <Button
-        size="small"
-        type="dashed"
-        icon={<EditOutlined />}
-        onClick={() => doEdit({ code: data.code, mode: "update" })}
-      ></Button>
+      (!editBtnTitle || editBtnTitle?.length < 4) ?
+        <Button {...btnProps}>{editBtnTitle || <EditOutlined />}</Button> :
+        <Tooltip title={editBtnTitle}><Button {...btnProps} icon={<EditOutlined />} /></Tooltip>
     );
   }
 

package/src/aldehyde/detail/button/view-button.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "antd";
+import { Button, Tooltip } from "antd";
 import { DtmplData, LtmplConfig, ShowViewParam } from "../../tmpl/interface";
 import { AlignCenterOutlined } from "@ant-design/icons";
 import ActionUtils from "../../controls/action/utils";
@@ -14,25 +14,24 @@ interface ViewButtonProps {
 
 const ViewButton: React.FC<ViewButtonProps> = (props) => {
   const { showView, data, ltmplConfig, buttonType = "primary" } = props;
+  const { classViewConfigs, detailBtnTitle, buttonViewAction } = ltmplConfig || {};
   let button = undefined;
-  if (ltmplConfig.classViewConfigs) {
-    ltmplConfig.classViewConfigs.forEach((classViewConfig) => {
+  if (classViewConfigs) {
+    classViewConfigs.forEach((classViewConfig) => {
       if (
         !button &&
         ActionUtils.isShow(classViewConfig.preposes, [data], undefined)
       ) {
+        const btnProps: any = {
+          size: "small",
+          type: buttonType,
+          onClick: () => showView({ code: data.code, dtmplSourceId: classViewConfig.id, })
+        };
         button = (
-          <Button
-            size="small"
-            type={buttonType}
-            icon={<AlignCenterOutlined />}
-            onClick={() =>
-              showView({
-                code: data.code,
-                dtmplSourceId: classViewConfig.id,
-              })
-            }
-          ></Button>
+          (!detailBtnTitle || detailBtnTitle?.length < 4) ?
+            <Button {...btnProps} >
+              {detailBtnTitle || <AlignCenterOutlined />}
+            </Button> : <Tooltip title={detailBtnTitle}><Button {...btnProps} icon={<AlignCenterOutlined />} /></Tooltip>
         );
       }
     });
@@ -42,18 +41,21 @@ const ViewButton: React.FC<ViewButtonProps> = (props) => {
   if (
     !button &&
     ActionUtils.isShow(
-      ltmplConfig.buttonViewAction?.preposes,
+      buttonViewAction?.preposes,
       [data],
       undefined
     )
   ) {
+    const btnProps: any = {
+      size: "small",
+      type: buttonType,
+      onClick: () => showView({ code: data.code })
+    };
     button = (
-      <Button
-        size="small"
-        type={buttonType}
-        icon={<AlignCenterOutlined />}
-        onClick={() => showView({ code: data.code })}
-      ></Button>
+      (!detailBtnTitle || detailBtnTitle?.length < 4) ?
+        <Button {...btnProps}>
+          {detailBtnTitle || <AlignCenterOutlined />}
+        </Button> : <Tooltip title={detailBtnTitle}><Button {...btnProps} icon={<AlignCenterOutlined />} /></Tooltip>
     );
   }
 

package/src/aldehyde/draw-canvas/edit/components/asset-bar/index.tsx

@@ -37,7 +37,8 @@ interface AssetItem {
   body: {
     path: string;
     suffix: string;
-  }
+  };
+  type: string; // 组件类型
 }
 
 const AssetList = () => {
@@ -52,6 +53,7 @@ const AssetList = () => {
     const url = handleImgUrl(item.body.path);
     e.dataTransfer.setData('src', url);
     e.dataTransfer.setData('type', item.body.suffix);
+    e.dataTransfer.setData('componentType', item.type); // 组件类型
     // e.dataTransfer.setData('points', '[]');
   };
 

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

@@ -1,5 +1,9 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { Dropdown, Modal, Space, Button, Divider, Tooltip } from 'antd';
+import { ImportOutlined, ExportOutlined, SaveOutlined, QuestionCircleOutlined, MergeCellsOutlined, NumberOutlined } 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';
@@ -35,12 +39,17 @@ 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 } = props;
+  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); // 当前历史记录标签
@@ -69,17 +78,37 @@ const MainHeader = (props: MainHeaderProps) => {
     input.click();
   }, [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 handleSave = useCallback((type: 'json' | 'svg' | 'asset' | 'png' | 'assetPng') => {
+  const handleExport = useCallback((type: 'json' | 'svg' | 'asset' | 'png' | 'assetPng', action?: "save" | "download") => {
     if (!render) return;
-    const data: { name: string; content: string }[] = [];
     switch (type) {
       case 'json':
-        data.push({ name: 'data.json', content: render.importExportTool.save() });
-        break;
+        if (action === "save") {
+          handleSave();
+        } else {
+          download("data.json", render.importExportTool.save());
+        }
+        return;
       case 'asset':
-        data.push({ name: 'asset.json', content: render.importExportTool.getAsset() });
-        break;
+        download("asset.json", render.importExportTool.getAsset());
+        return;
       case 'png':
         download('image.png', render.importExportTool.getAssetImage(2));
         return;
@@ -87,9 +116,6 @@ const MainHeader = (props: MainHeaderProps) => {
         download('image.png', render.importExportTool.getAssetImage());
         return;
     }
-    if (data.length) {
-      data.forEach(({ name, content }) => download(name, content));
-    }
   }, [render]);
 
   // 下载辅助函数
@@ -138,8 +164,8 @@ const MainHeader = (props: MainHeaderProps) => {
 
   // 缩放菜单选项
   const scaleMenu = [
-    { key: "fit", label: <a onClick={() => handleScale('fit')}>自适应大小</a> },
-    { key: "reset", label: <a onClick={() => handleScale('reset')}>重置位置大小</a> },
+    { key: "fit", label: <a onClick={() => handleScale('fit')}>自适应</a> },
+    { key: "reset", label: <a onClick={() => handleScale('reset')}>重置位置及缩放</a> },
     { key: "position", label: <a onClick={() => handleScale('position')}>仅重置位置</a> }
   ];
 
@@ -173,9 +199,29 @@ const MainHeader = (props: MainHeaderProps) => {
         <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="导入">
+          <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="快捷键" open={showShortCut} onCancel={() => setShowShortCut(false)}>
+        <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>

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

@@ -5,6 +5,8 @@ import { Draw, BaseDraw, Render } from '../types';
 
 export interface BgDrawOption {
   size: number;
+  readonly?: boolean;
+  showGrid?: boolean;
 }
 
 export class BgDraw extends BaseDraw implements Draw {
@@ -12,87 +14,150 @@ export class BgDraw extends BaseDraw implements Draw {
   static override readonly name = 'bg';
   option: BgDrawOption;
 
+  // 独立容器：用于存放静态的背景和画布
+  private staticGroup: Konva.Group;
+  // 独立容器：专门用于存放动态网格
+  private gridGroup: Konva.Group;
+  // 标记静态元素是否需要重绘
+  private isStaticInitialized: boolean = false;
+
   constructor(render: Render, layer: Konva.Layer, option: BgDrawOption) {
     super(render, layer);
     this.option = option;
     this.group.listening(false);
+
+    // 预先创建好两个独立的 Group
+    this.staticGroup = new Konva.Group({ name: 'bg-static', listening: false });
+    this.gridGroup = new Konva.Group({ name: 'bg-grid', listening: false });
+
+    // 注意添加顺序：静态在下，网格在上
+    this.group.add(this.staticGroup);
+    this.group.add(this.gridGroup);
+
+    // 监听页面配置变化，当配置改变时，重置静态层初始化状态
+    this.render.on('page-settings-change', () => {
+      this.isStaticInitialized = false;
+      // 触发整体重绘，让 draw 方法重新执行
+      this.draw();
+    });
+  }
+
+  // 更新配置项，触发重绘
+  public updateOption(newOption: Partial<BgDrawOption>) {
+    this.option = { ...this.option, ...newOption };
+    this.draw();
   }
 
   override draw() {
-    this.clear(); // 重置
-    const { width, height, x, y } = this.render.getStageState(); // 获取页面配置
-    const { pageWidth, pageHeight, background } = this.render.getPageSettings(); // 画布配置，尺寸（使用设置的 pageWidth/pageHeight）
-    const cellSize = this.option.size; // 网格尺寸
+    // 1. 如果静态元素未初始化，或者配置发生变化导致标记被重置，则重新绘制
+    if (!this.isStaticInitialized) {
+      this.renderStaticElements();
+      this.isStaticInitialized = true;
+    }
+    // 2. 仅重绘网格部分（拖拽/缩放时高频调用）
+    if (!this.option.readonly && this.option.showGrid) { // 只读页面不显示网格
+      this.renderGrid();
+    } else { // 清除已渲染网格
+      this.gridGroup.destroyChildren();
+    }
+  }
+
+  /**
+   * 渲染静态元素（仅在初始化或配置改变时执行）
+   */
+  private renderStaticElements() {
+    // 清除旧的静态元素
+    this.staticGroup.destroyChildren();
+    const { width, height, x, y } = this.render.getStageState();
+    const { pageWidth, pageHeight, background, backgroundImg } = this.render.getPageSettings();
 
-    // 计算列数和行数（基于stage 尺寸）
+    // 背景层（填满整个 stage）
+    const bgRect = new Konva.Rect({
+      name: `${this.constructor.name}__background`,
+      x: this.render.toStageValue(-x + this.render.rulerSize),
+      y: this.render.toStageValue(-y + this.render.rulerSize),
+      width: this.render.toStageValue(width),
+      height: this.render.toStageValue(height),
+      listening: false,
+      fill: 'transparent'
+    });
+
+    // 画布边框
+    const canvas = new Konva.Rect({
+      name: this.constructor.name,
+      x: 0,
+      y: 0,
+      width: pageWidth,
+      height: pageHeight,
+      stroke: this.option.readonly ? "transparent" : 'rgba(255,0,0,0.3)',
+      strokeWidth: this.render.toStageValue(2),
+      listening: false,
+      dash: [this.render.toStageValue(6), this.render.toStageValue(6)],
+      fill: background || 'transparent',
+    });
+
+    this.staticGroup.add(bgRect);
+    this.staticGroup.add(canvas);
+
+    // 处理背景图（异步）
+    if (backgroundImg?.src) {
+      const img = new Image();
+      img.crossOrigin = 'anonymous'; // 如果图片在 CDN 上，必须加上此属性防止跨域问题
+      img.src = backgroundImg.src;
+      img.onload = () => {
+        canvas.fill(null);
+        canvas.fillPatternImage(img);
+        canvas.fillPatternRepeat('no-repeat');
+        // 让图片自适应填满矩形（等比缩放裁剪效果）
+        const scaleX = pageWidth / img.width;
+        const scaleY = pageHeight / img.height;
+        canvas.fillPatternScaleX(scaleX);
+        canvas.fillPatternScaleY(scaleY);
+      };
+    }
+  }
+
+  /**
+   * 渲染网格（每次拖拽/缩放时调用）
+   */
+  private renderGrid() {
+    // 仅清空网格 Group，不影响静态层
+    this.gridGroup.destroyChildren();
+    const { width, height, x, y } = this.render.getStageState();
+    const cellSize = this.option.size;
     const lenX = Math.ceil(this.render.toStageValue(width + this.render.rulerSize) / cellSize);
     const lenY = Math.ceil(this.render.toStageValue(height + this.render.rulerSize) / cellSize);
     const startX = -Math.ceil(this.render.toStageValue(x) / cellSize);
     const startY = -Math.ceil(this.render.toStageValue(y) / cellSize);
+    const lines: Konva.Line[] = [];
 
-    const group = new Konva.Group();
-
-    // 背景层（填满整个 stage）
-    group.add(
-      new Konva.Rect({
-        name: `${this.constructor.name}__background`,
-        x: this.render.toStageValue(-x + this.render.rulerSize),
-        y: this.render.toStageValue(-y + this.render.rulerSize),
-        width: this.render.toStageValue(width),
-        height: this.render.toStageValue(height),
-        listening: false,
-        fill: 'transparent'
-      })
-    );
-
-    // 画布边框（使用 pageWidth/pageHeight）
-    group.add(
-      new Konva.Rect({
-        name: this.constructor.name,
-        x: 0,
-        y: 0,
-        width: pageWidth,
-        height: pageHeight,
-        stroke: 'rgba(255,0,0,0.3)',
-        strokeWidth: this.render.toStageValue(2),
-        listening: false,
-        dash: [this.render.toStageValue(6), this.render.toStageValue(6)],
-        fill: background || 'transparent'
-      })
-    );
-
-    // 网格竖线
-    for (let x = startX; x < lenX + startX + 2; x++) {
-      group.add(
-        new Konva.Line({
-          name: this.constructor.name,
-          points: [
-            [cellSize * x, this.render.toStageValue(-y + this.render.rulerSize)],
-            [cellSize * x, this.render.toStageValue(height - y + this.render.rulerSize)]
-          ].flat(),
-          stroke: '#ddd',
-          strokeWidth: this.render.toStageValue(1),
-          listening: false
-        })
-      );
+    // 生成竖线
+    for (let i = startX; i < lenX + startX + 2; i++) {
+      lines.push(new Konva.Line({
+        points: [
+          cellSize * i, this.render.toStageValue(-y + this.render.rulerSize),
+          cellSize * i, this.render.toStageValue(height - y + this.render.rulerSize)
+        ],
+        stroke: '#ddd',
+        strokeWidth: this.render.toStageValue(1),
+        listening: false
+      }));
     }
 
-    // 网格横线
-    for (let y = startY; y < lenY + startY + 2; y++) {
-      group.add(
-        new Konva.Line({
-          name: this.constructor.name,
-          points: [
-            [this.render.toStageValue(-x + this.render.rulerSize), cellSize * y],
-            [this.render.toStageValue(width - x + this.render.rulerSize), cellSize * y]
-          ].flat(),
-          stroke: '#ddd',
-          strokeWidth: this.render.toStageValue(1),
-          listening: false
-        })
-      );
+    // 生成横线
+    for (let j = startY; j < lenY + startY + 2; j++) {
+      lines.push(new Konva.Line({
+        points: [
+          this.render.toStageValue(-x + this.render.rulerSize), cellSize * j,
+          this.render.toStageValue(width - x + this.render.rulerSize), cellSize * j
+        ],
+        stroke: '#ddd',
+        strokeWidth: this.render.toStageValue(1),
+        listening: false
+      }));
     }
 
-    this.group.add(group);
+    // 批量添加线条到网格 Group
+    this.gridGroup.add(...lines);
   }
 }

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

@@ -25,7 +25,7 @@ export class PreviewDraw extends BaseDraw implements Draw {
   override draw() {
     this.clear();
     const stageState = this.render.getStageState();
-    const { pageWidth, pageHeight, background } = this.render.getPageSettings(); // 画布尺寸
+    const { pageWidth, pageHeight, background, backgroundImg } = this.render.getPageSettings(); // 画布尺寸
     const previewMargin = 20;  // 预览框的外边距
     // 预览框 group
     const group = new Konva.Group({
@@ -101,7 +101,6 @@ export class PreviewDraw extends BaseDraw implements Draw {
       height: group.height(),
       stroke: '#666',
       strokeWidth: this.render.toStageValue(1),
-      fill: !background ? "#ffffff" : background
     });
 
     // 根据预览框内部拖动，同步画布的移动
@@ -139,19 +138,38 @@ export class PreviewDraw extends BaseDraw implements Draw {
       this.state.moving = false;
     })
     group.add(bg);
-    // 预览框 边框
-    group.add(
-      new Konva.Rect({
-        name: this.constructor.name,
-        x: 0,
-        y: 0,
-        width: this.render.toStageValue(pageWidth * stageState.scale),
-        height: this.render.toStageValue(pageHeight * stageState.scale),
-        stroke: 'rgba(255,0,0,0.2)',
-        strokeWidth: 1 / this.option.size,
-        listening: false
-      })
-    );
+    // 预览框 画布
+    const canvas = new Konva.Rect({
+      name: this.constructor.name,
+      x: 0,
+      y: 0,
+      width: this.render.toStageValue(pageWidth * stageState.scale),
+      height: this.render.toStageValue(pageHeight * stageState.scale),
+      stroke: 'rgba(255,0,0,0.2)',
+      strokeWidth: 1 / this.option.size,
+      listening: false,
+      fill: !background ? "#ffffff" : background
+    });
+
+    group.add(canvas);
+
+    // // 处理背景图（异步）
+    // if (backgroundImg?.src) {
+    //   const img = new Image();
+    //   img.crossOrigin = 'anonymous'; // 如果图片在 CDN 上，必须加上此属性防止跨域问题
+    //   img.src = backgroundImg.src;
+    //   img.onload = () => {
+    //     canvas.fill(null);
+    //     canvas.fillPatternImage(img);
+    //     canvas.fillPatternRepeat('no-repeat');
+    //     // 让图片自适应填满矩形（等比缩放裁剪效果）
+    //     const scaleX = pageWidth / img.width;
+    //     const scaleY = pageHeight / img.height;
+    //     canvas.fillPatternScaleX(scaleX);
+    //     canvas.fillPatternScaleY(scaleY);
+    //   };
+    // }
+
     // 复制提取的节点，用作预览
     for (const node of nodes) {
       const copy = node.clone();