aldehyde 0.2.480 → 0.2.481

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

@@ -1,302 +1,270 @@
-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);
-    });
-  };
-}
+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";
+import { WorkstationComponent } from '../components';
+
+// 统一组件创建
+
+export interface CreateImageComponentOptions {
+  src: string;
+  type: string;
+  componentType?: string;
+}
+
+export interface CreateJsonComponentOptions {
+  src: string;
+}
+
+export class ComponentFactory {
+  private render: Render;
+  workstationComponent: WorkstationComponent;
+
+  constructor(render: Render) {
+    this.render = render;
+    this.workstationComponent = new WorkstationComponent(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;
+    let comGroup: { group: Konva.Group; points: AssetInfoPoint[] };
+    let group: Konva.Group;
+    let points: AssetInfoPoint[];
+    switch (componentType) {
+      case "workstation": // 工位
+        return this.workstationComponent.create(src, type);
+      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', () => {
+      const container = node.getStage().getContent();
+      container.style.cursor = 'pointer';
+    });
+    node.on('mouseleave', () => {
+      const container = node.getStage().getContent();
+      container.style.cursor = 'default';
+    });
+  }
+
+  // 只读页面组件初始化更新
+  readonlyInitComponentSetting(props: { node: Konva.Group }) {
+    const { node } = props;
+    const { componentType } = node.getAttrs() || {};
+    switch (componentType) {
+      case "workstation": // 工位
+        this.workstationComponent.readonlyInit(node);
+        break;
+      default:
+        break;
+    }
+  }
+
+  // 更新组件设置
+  updateComponentSetting(props: { node: Konva.Group, settings: AssetSettings }) {
+    const { node, settings } = props;
+    const { componentType } = node.getAttrs() || {};
+    switch (componentType) {
+      case "workstation":
+        this.workstationComponent.updateSettings(node, settings);
+        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": // 工位
+          this.workstationComponent.updateCloneOrder(node, workstationOrders);
+          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);
+    });
+  };
+}