aldehyde 0.2.479 → 0.2.480

package/src/aldehyde/draw-canvas-edit/components/render/tools/component-factory.ts

@@ -0,0 +1,302 @@
+import Konva from 'konva';
+import { nanoid } from 'nanoid';
+import { Render } from '../index';
+import { AssetType, AssetInfoPoint, AssetSettings, LinkDrawPoint } from '../types';
+import { handleImgUrl } from "../../asset-bar/index";
+
+// 统一组件创建
+
+interface workstationSettings extends AssetSettings {
+  workstationNumber: string; // 工位编号
+}
+
+export interface CreateImageComponentOptions {
+  src: string;
+  type: string;
+  componentType?: string;
+}
+
+export interface CreateJsonComponentOptions {
+  src: string;
+}
+
+export class ComponentFactory {
+  private render: Render;
+
+  constructor(render: Render) {
+    this.render = render;
+  }
+
+  /**
+   * 创建图片组件（svg、gif、png等）
+   */
+  async createImageComponent(options: CreateImageComponentOptions) {
+    const { src, type, componentType } = options;
+    const { pageHeight, pageWidth } = this.render.getPageSettings()
+    const target = await this.render.assetTool[{ svg: "loadSvg", gif: "loadGif" }[type] || "loadImg"](handleImgUrl(src));
+    let width = target.width();
+    let height = target.height();
+    if (width > pageWidth || height > pageHeight) { // 原图尺寸超过页面大小时进行缩放
+      const sizeScale = Math.min(pageWidth / width, pageHeight / height);
+      width *= sizeScale;
+      height *= sizeScale;
+      target.setSize({ width, height });
+    }
+    const group = new Konva.Group({
+      id: nanoid(),
+      width,
+      height,
+      name: 'asset',
+      assetType: AssetType.Image,
+      draggable: true,
+      componentType,
+      componentSrc: src,
+      imageType: ["svg", "gif", "other"].includes(type) ? type : "other"
+    });
+    this.render.setAssetSettings(group, this.render.getAssetSettings(), false);
+    group.add(target);
+    const points: AssetInfoPoint[] = [
+      { x: 0, y: group.height() / 2, direction: 'left' },  // 左
+      { x: group.width(), y: group.height() / 2, direction: 'right' }, // 右
+      { x: group.width() / 2, y: 0, direction: 'top' }, // 上
+      { x: group.width() / 2, y: group.height(), direction: 'bottom' } // 下
+    ];
+    return { group, points };
+  }
+
+  /**
+   * 创建 JSON 组合组件
+   */
+  async createJsonComponent(options: CreateJsonComponentOptions) {
+    const { src } = options;
+    const { pageHeight, pageWidth } = this.render.getPageSettings()
+    const target = await this.render.assetTool["loadJson"](handleImgUrl(src));
+    let width = target.width();
+    let height = target.height();
+    if (width > pageWidth || height > pageHeight) { // 原图尺寸超过页面大小时进行缩放
+      const sizeScale = Math.min(pageWidth / width, pageHeight / height);
+      width *= sizeScale;
+      height *= sizeScale;
+      target.setSize({ width, height });
+    }
+    target.id(nanoid());
+    target.setAttrs({
+      name: 'asset',
+      assetType: AssetType.Json,
+      draggable: true
+    });
+    target.setAttrs({ x: 0, y: 0 } as any);
+    this.render.linkTool.groupIdCover(target);
+    return { group: target };
+  }
+
+  // 创建Tooltip
+  createTooltipComponent(props: { x: number, y: number }) {
+    const { x = 0, y = 0 } = props;
+    // 创建一个标签容器
+    const tooltip = new Konva.Label({ name: "tooltip", x, y, opacity: 0.75, visible: false, listening: false });
+    // 往标签上面添加带箭头的背景形状
+    tooltip.add(
+      new Konva.Tag({
+        fill: 'black',
+        pointerDirection: 'down', // 箭头方向
+        pointerWidth: 6,
+        pointerHeight: 6,
+        cornerRadius: 4,
+        lineJoin: 'round'
+      })
+    );
+    // 往标签上面添加文字
+    const tooltipText = new Konva.Text({
+      name: "tooltip-text",
+      text: '提示框',
+      fontSize: 12,
+      padding: 4,
+      fill: 'white'
+    });
+    tooltip.add(tooltipText);
+    return tooltip;
+  }
+
+  // 更新Tooltip
+  updateTooltipText(node: Konva.Group, newText: string) {
+    const tooltipNode = node.findOne('.tooltip') as Konva.Label;
+    if (!tooltipNode) {
+      return;
+    }
+    const textNode = tooltipNode.findOne('.tooltip-text') as Konva.Text;
+    textNode.setAttr("text", newText);
+  }
+
+  /**
+   * 根据 componentType 创建特定类型组件
+   */
+  async createTypedComponent(options: CreateImageComponentOptions) {
+    const { src, type, componentType } = options;
+    const { themeToken } = this.render.config || {};
+    let comGroup: { group: Konva.Group; points: AssetInfoPoint[] };
+    let group: Konva.Group;
+    let points: AssetInfoPoint[];
+    switch (componentType) {
+      case "workstation": // 工位
+        const workstationNodes = this.render.getAllAssets()?.filter(asset => asset.componentType === "workstation");
+        const order = Math.max(...workstationNodes.map(asset => asset.settings.order), 0) + 1; // 当前工位序号，自增
+        comGroup = await this.createImageComponent({ src, type, componentType });
+        group = comGroup.group;
+        points = comGroup.points;
+        const fontSize = Math.min(group.width(), group.height()) * 0.5;
+        const text = new Konva.Text({
+          name: "order",
+          text: `${order}`,
+          fontSize, // 字体大小随半径变化
+          fontFamily: 'Arial',
+          fill: themeToken.colorPrimary || "#000000",
+          align: 'center',
+          offsetX: 0,
+          offsetY: 0,
+          width: group.width()
+        });
+        text.x(0);
+        text.y(group.height() / 2 - text.height() / 7);
+        const tooltip = this.createTooltipComponent({ x: group.width() / 2, y: group.height() / 2 });
+        group.add(text);
+        group.add(tooltip);
+        this.render.setAssetSettings(group, { ...this.render.getAssetSettings(group), order }, true);
+        break;
+      default:
+        comGroup = await this.createImageComponent({ src, type, componentType });
+        group = comGroup.group;
+        points = comGroup.points;
+        break;
+    }
+    return { group, points };
+  }
+
+  // 创建组件连接点
+  createComponentLinkPoints(props: { showPoints: string, points: AssetInfoPoint[], group: Konva.Group }) {
+    const { showPoints, points, group } = props;
+    if (showPoints === "true") {
+      // 连接点信息
+      group.setAttrs({
+        points: points.map((o) => ({ ...o, id: nanoid(), groupId: group.id(), visible: false, pairs: [], direction: o.direction }) as LinkDrawPoint)
+      });
+      // 连接点锚点
+      for (const point of group.getAttr('points') ?? []) {
+        group.add(
+          new Konva.Circle({
+            name: 'link-anchor',
+            id: point.id,
+            x: point.x,
+            y: point.y,
+            radius: this.render.toStageValue(1),
+            stroke: 'rgba(0,0,255,1)',
+            strokeWidth: this.render.toStageValue(2),
+            visible: false,
+            direction: point.direction,
+          })
+        );
+      }
+    }
+  }
+
+  // 渲染页组件设置鼠标移入移出样式
+  setCursorPointer = (node: Konva.Group) => {
+    node.on('mouseenter', function () {
+      const container = this.getStage().getContent();
+      container.style.cursor = 'pointer';
+    });
+    node.on('mouseleave', function () {
+      const container = this.getStage().getContent();
+      container.style.cursor = 'default';
+    });
+  }
+
+  // 只读页面组件初始化更新
+  readonlyInitComponentSetting(props: { node: Konva.Group }) {
+    const { node } = props;
+    const { componentType } = node.getAttrs() || {};
+    switch (componentType) {
+      case "workstation": // 工位
+        const orderText = node.findOne(".order");
+        orderText?.visible?.(false); // 只读页面不显示工位序号
+        this.setCursorPointer(node);
+        break;
+      default:
+        break;
+    }
+  }
+
+  // 更新组件设置
+  updateComponentSetting(props: { node: Konva.Group, settings: AssetSettings }) {
+    const { node, settings } = props;
+    const { componentType } = node.getAttrs() || {};
+    switch (componentType) {
+      case "workstation":
+        this.updateTooltipText(node, (settings as workstationSettings).workstationNumber); // 工位编号弹窗
+        node.findOne(".order")?.setAttr("text", settings.order); // 工位序号显示
+        break;
+      default:
+        break;
+    }
+  }
+
+  // 克隆组件更新组件配置
+  updateCloneNodeSetting(nodes: Konva.Group[]) {
+    const allAssets = this.render.getAllAssets();
+    const workstationOrders = allAssets?.filter(asset => asset.componentType === "workstation")?.map(asset => asset.settings.order) || []; // 工位组件自增序号
+    nodes.forEach(node => {
+      const { componentType } = node.getAttrs() || {};
+      switch (componentType) {
+        case "workstation": // 工位
+          const order = Math.max(...workstationOrders, 0) + 1; // 当前工位序号，自增
+          workstationOrders.push(order);
+          const orderText = node.findOne(".order");
+          this.render.setAssetSettings(node, { ...this.render.getAssetSettings(node), order }, true);
+          orderText.setAttr("text", order);
+          break;
+        default:
+          break;
+      }
+    });
+  }
+
+  // 克隆已有节点（用于复制粘贴）
+  cloneNodes(nodes: Konva.Node[]): Konva.Node[] {
+    const clones: Konva.Group[] = [];
+    for (const node of nodes) {
+      if (node instanceof Konva.Transformer) {
+        // 复制已选择：递归处理 selectingNodes
+        const backup = [...this.render.selectionTool.selectingNodes];
+        this.render.selectionTool.selectingClear();
+        this.render.linkTool.selectingClear();
+        return this.cloneNodes(backup);
+      }
+      const newNode = node.clone();
+      clones.push(newNode);
+    }
+    this.updateCloneNodeSetting(clones);
+    return clones;
+  }
+
+  // 组件鼠标移入事件
+  groupMouseenter = ({ group }) => {
+    group.off('mouseenter');
+    group.on('mouseenter', () => {
+      this.render.linkTool.pointsVisible(true, group); // 显示 连接点
+      const tooltipNode = group.findOne(".tooltip");
+      if (tooltipNode) { // 组件存在tooltip且存在文本显示
+        const isText = tooltipNode.findOne(".tooltip-text")?.getAttr("text");
+        if (isText) tooltipNode.visible(true);
+      }
+    });
+  };
+
+  // 组件鼠标移出事件
+  groupMouseleave = ({ group }) => {
+    group.off('mouseleave');
+    group.on('mouseleave', () => {
+      this.render.linkTool.pointsVisible(false, group);
+      group.findOne(".tooltip")?.visible(false);
+    });
+  };
+}

package/src/aldehyde/draw-canvas-edit/components/render/tools/copy-tool.ts

@@ -183,25 +183,14 @@ export class CopyTool {
 
     for (const node of nodes) {
       if (node instanceof Konva.Group) {
-        node.off('mouseenter');
-        node.on('mouseenter', () => {
-          // 显示 连接点
-          this.render.linkTool.pointsVisible(true, node);
-        });
-        node.off('mouseleave');
-        node.on('mouseleave', () => {
-          // 隐藏 连接点
-          this.render.linkTool.pointsVisible(false, node);
-          // 隐藏 hover 框
-          node.findOne('#hoverRect')?.visible(false);
-        });
-
+        // 重新绑定鼠标事件
+        this.render.componentFactory.groupMouseenter({ group: node });
+        this.render.componentFactory.groupMouseleave({ group: node });
         // 使新节点产生偏移
         node.setAttrs({
           x: node.x() + this.render.toStageValue(this.render.bgSize) * this.pasteCount,
-          y: node.y() + this.render.toStageValue(this.render.bgSize) * this.pasteCount
+          y: node.y() + this.render.toStageValue(this.render.bgSize) * this.pasteCount,
         });
-
         // 拐点也需要偏移
         if (node.attrs.manualPointsMap) {
           const manualPointsMap = {} as ManualPointsMap;
@@ -214,9 +203,9 @@ export class CopyTool {
           for (const pairId in manualPointsMap) {
             const manualPoints = manualPointsMap[pairId];
             if (Array.isArray(manualPoints)) {
-              manualPointsMap[pairId] = manualPoints.map((o) => ({
+              manualPointsMap[pairId] = manualPoints.map((o: any) => ({
                 x: o.x + this.render.toStageValue(this.render.bgSize) * this.pasteCount,
-                y: o.y + this.render.toStageValue(this.render.bgSize) * this.pasteCount
+                y: o.y + this.render.toStageValue(this.render.bgSize) * this.pasteCount,
               }));
             }
           }
@@ -230,38 +219,27 @@ export class CopyTool {
   /**
    * 复制粘贴
    * @param nodes 节点数组
-   * @param skip 跳过检查
-   * @returns 复制的元素
    */
   copy(nodes: Konva.Node[]) {
-    const clones: Konva.Group[] = [];
-    for (const node of nodes) {
-      if (node instanceof Konva.Transformer) {
-        // 复制已选择
-        const backup = [...this.render.selectionTool.selectingNodes];
-        this.render.selectionTool.selectingClear();
-        this.render.linkTool.selectingClear();
-        this.copy(backup);
-        return;
-      } else {
-        // 复制未选择（先记录，后处理）
-        clones.push(node.clone());
-      }
-    }
-    // 刷新 id、事件
+    // 使用 ComponentFactory 克隆节点
+    const clones = this.render.componentFactory.cloneNodes(nodes);
+    // 刷新 id、事件、偏移
     this.nodesIdCover(clones);
     // 插入新节点
-    this.render.layer.add(...clones);
-    // 选中复制内容
-    this.render.selectionTool.select(clones);
-    // 更新历史
-    this.render.updateHistory();
-    // 重绘
-    this.render.redraw([
-      GraphDraw.name,
-      LinkDraw.name,
-      RulerDraw.name,
-      PreviewDraw.name
-    ]);
+    const validGroups = clones.filter((o) => o instanceof Konva.Group) as Konva.Group[];
+    if (validGroups.length > 0) {
+      this.render.layer.add(...validGroups);
+      // 选中复制内容
+      this.render.selectionTool.select(validGroups);
+      // 更新历史
+      this.render.updateHistory();
+      // 重绘
+      this.render.redraw([
+        GraphDraw.name,
+        LinkDraw.name,
+        RulerDraw.name,
+        PreviewDraw.name
+      ]);
+    }
   }
 }

package/src/aldehyde/draw-canvas-edit/components/render/tools/import-export-tool.ts

@@ -36,7 +36,7 @@ export class ImportExportTool {
         // 如果当前被选中，listening 会是 false，需恢复
         node.listening(true);
         // 恢复 draggable（因为，绘制 Graph 的时候，不允许直接拖动其他素材）
-        node.draggable(!this.render.config.readonly);
+        node.draggable(!this.render.config.readonly && !node.attrs.locked);
         for (const child of (node as Konva.Group).children) {
           if (this.render.ignoreSelect(child)) {
             child.remove();
@@ -107,29 +107,21 @@ export class ImportExportTool {
         await this.restoreImage(node.getChildren());
       } else if (node instanceof Konva.Image) {
         // 处理图片
-        if (node.attrs.svgXML) {
-          // svg 素材
+        if (node.attrs.svgXML) { // svg 素材
           const blob = new Blob([node.attrs.svgXML], { type: 'image/svg+xml' });
-          // dataurl
           const url = URL.createObjectURL(blob);
-          // 加载为图片 element
           const image = await this.loadImage(url);
-          if (image) {
-            // 设置图片
+          if (image) { // 设置图片
             node.image(image);
           }
-        } else if (node.attrs.gif) {
-          // gif 素材
+        } else if (node.attrs.gif) {  // gif 素材
           const imageNode = await this.render.assetTool.loadGif(node.attrs.gif);
           if (imageNode) {
-            // 设置图片
             node.image(imageNode.image());
           }
-        } else if (node.attrs.src) {
-          // 其他图片素材
+        } else if (node.attrs.src) { // 其他图片素材
           const image = await this.loadImage(node.attrs.src);
           if (image) {
-            // 设置图片
             node.image(image);
           }
         }
@@ -186,9 +178,12 @@ export class ImportExportTool {
     }
   }
 
-  // 恢复
+  // 恢复(导入)
   async restore(json: string, silent = false) {
-
+    if (!Object.keys(JSON.parse(json)).length) {
+      return;
+    }
+    const readonly = this.render.config.readonly;
     try {
       this.render.emit('loading', true);
       // 清空选择
@@ -197,9 +192,9 @@ export class ImportExportTool {
       // 清空 main layer 节点
       this.render.layer.getChildren().forEach((o) => o.destroy());
       this.render.layer.removeChildren();
-
       // 加载 json，提取节点
       const container = document.createElement('div');
+      // 反序列化
       const stage = Konva.Node.create(json, container);
       const main = stage.getChildren()[0];
       const nodes = main.getChildren();
@@ -208,34 +203,15 @@ export class ImportExportTool {
       await this.restoreGraph(nodes);
       for (const node of nodes) {
         // 重置旧数据节点为可 draggable
-        // 为了使旧数据和新节点一样
-        // 可以直接被拖动
-        node.draggable(!this.render.config.readonly);
-        node.off('mouseenter');
-        node.on('mouseenter', () => {
-          // 显示 连接点
-          this.render.linkTool.pointsVisible(true, node);
-        });
-        // 恢复的时候，恢复 hoverRect
-        node.add(
-          new Konva.Rect({
-            id: 'hoverRect',
-            width: node.width(),
-            height: node.height(),
-            fill: 'rgba(0,255,0,0.3)',
-            visible: false
-          })
-        );
-        node.off('mouseleave');
-        node.on('mouseleave', () => {
-          // 隐藏 连接点
-          this.render.linkTool.pointsVisible(false, node);
-          // 隐藏 hover 框
-          node.findOne('#hoverRect')?.visible(false);
-        });
+        node.draggable(!readonly && !node.attrs.locked);
+        // 组件鼠标移入移出事件
+        this.render.componentFactory.groupMouseenter({ group: node });
+        this.render.componentFactory.groupMouseleave({ group: node });
+        if (readonly) {
+          this.render.componentFactory.readonlyInitComponentSetting({ node });
+        }
       }
-      // 往 main layer 插入新节点
-      this.render.layer.add(...nodes);
+      this.render.layer.add(...nodes); // 插入节点
       // 同步页面设置
       this.render.stage.setAttr('pageSettings', stage.attrs.pageSettings);
       this.render.emit('page-settings-change', this.render.getPageSettings());
@@ -554,9 +530,9 @@ export class ImportExportTool {
 
     // 合并设置
     const assetSettings: AssetSettings = {
-      stroke: pageSettings.stroke,
-      strokeWidth: pageSettings.strokeWidth,
-      fill: pageSettings.fill,
+      stroke: "#000000",
+      strokeWidth: 1,
+      fill: "#000000",
       arrowStart: false,
       arrowEnd: false,
       fontSize: pageSettings.fontSize,

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

@@ -7,3 +7,4 @@ export { ImportExportTool } from './import-export-tool';
 export { AlignTool } from './align-tool';
 export { LinkTool } from './link-tool';
 export { AttractTool } from './attract-tool';
+export { ComponentFactory } from './component-factory';

package/src/aldehyde/draw-canvas-edit/components/render/tools/selection-tool.ts

@@ -49,28 +49,6 @@ export class SelectionTool {
 
   // 选择节点
   select(nodes: Konva.Node[]) {
-    if (nodes.length > 1) {
-      // 多选 不能改变大小/旋转
-      this.render.transformer.resizeEnabled(false);
-      this.render.transformer.rotateEnabled(false);
-    } else {
-      if (nodes.length === 1) {
-        const target = nodes[0];
-        // 图形 不能改变大小
-        this.render.transformer.resizeEnabled(
-          target.attrs.assetType === AssetType.Graph ? false : true
-        );
-        this.render.transformer.rotateEnabled(
-          target.attrs.assetType === AssetType.Graph &&
-            ["Line", "Curve", "Bezier"].includes(target.attrs.graphType)
-            ? false
-            : true
-        );
-      } else {
-        this.render.transformer.resizeEnabled(true);
-      }
-    }
-
     // 清除连接线选中
     this.render.linkTool.selectingClear();
     // 选择变化了
@@ -96,6 +74,9 @@ export class SelectionTool {
           listening: false, // 不可交互
           opacity: node.opacity() * 0.8 // 设置透明度
         });
+        if (node instanceof Konva.Group) {
+          node.findOne(".tooltip")?.visible(false); // 存在tooltip,选中组件时隐藏
+        }
       }
 
       // 提升层次
@@ -109,6 +90,36 @@ export class SelectionTool {
       // 选中的节点，放进 transformer
       this.render.transformer.nodes(this.selectingNodes);
     }
+
+    // 设置 transformer 的 resize/rotate/draggable（必须在 selectingClear 和 transformer.nodes 之后）
+    const allLocked = nodes.length > 0 && nodes.every((n) => !!n.attrs.locked);
+    if (allLocked) {
+      this.render.transformer.resizeEnabled(false);
+      this.render.transformer.rotateEnabled(false);
+      this.render.transformer.draggable(false);
+    } else {
+      this.render.transformer.draggable(true);
+      if (nodes.length > 1) {
+        // 多选：允许改变大小和旋转
+        this.render.transformer.resizeEnabled(true);
+        this.render.transformer.rotateEnabled(true);
+      } else if (nodes.length === 1) {
+        const target = nodes[0];
+        // 图形 不能改变大小
+        this.render.transformer.resizeEnabled(
+          target.attrs.assetType === AssetType.Graph ? false : true
+        );
+        this.render.transformer.rotateEnabled(
+          target.attrs.assetType === AssetType.Graph &&
+            ["Line", "Curve", "Bezier"].includes(target.attrs.graphType)
+            ? false
+            : true
+        );
+      } else {
+        this.render.transformer.resizeEnabled(true);
+      }
+    }
+
     // 重绘
     this.render.redraw([GraphDraw.name, LinkDraw.name]);
   }
@@ -124,7 +135,7 @@ export class SelectionTool {
 
   // 选择所有节点
   selectAll() {
-    const nodes = this.render.layer.find('.asset') as Konva.Node[];
+    const nodes = this.render.layer.find('.asset') as Konva.Group[];
     this.select(nodes);
   }
 }

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

@@ -13,6 +13,7 @@ export interface RenderConfig {
   attractBg?: boolean;
   attractNode?: boolean;
   readonly?: boolean;
+  themeToken?: { [key: string]: any };
 }
 
 export type RenderEvents = {
@@ -252,9 +253,6 @@ export interface PageSettings {
     src: string;
     code: string;
   };
-  stroke: string;
-  strokeWidth: number;
-  fill: string;
   linkStroke: string;
   linkStrokeWidth: number;
   fontSize: number;
@@ -265,9 +263,9 @@ export interface PageSettings {
  * 素材设置
  */
 export interface AssetSettings {
-  stroke: string;
-  strokeWidth: number;
-  fill: string;
+  stroke?: string;
+  strokeWidth?: number;
+  fill?: string;
   arrowStart: boolean;
   arrowEnd: boolean;
   fontSize: number;
@@ -277,6 +275,8 @@ export interface AssetSettings {
   y: number;
   rotation: number;
   tension: number;
+  dataSource?: string;
+  order?: number; // 序号（工位自增序号）
 }
 
 /**

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

@@ -79,7 +79,7 @@ const ImageUpload: React.FC<UploadProps> = (props) => {
                 const url = handleImgUrl(basePath);
                 setFileList([{ ...info.file, url }]);
                 // onChange?.(url);
-                onChange?.({ src: url, code });
+                onChange?.({ src: basePath, code });
             } else {
                 setFileList([...info.fileList]);
             }
@@ -106,6 +106,7 @@ const ImageUpload: React.FC<UploadProps> = (props) => {
             onChange={handleChange}
             onRemove={handleDelete}
             onPreview={() => window.open(fileList[0].url)}
+            styles={{ root: { overflow: "hidden" } }}
         >
             {fileList.length > 0 ? null : <div className={'upload-btn'}>
                 <PlusOutlined />