@ysjdemo/umi-create-cli 0.0.2 → 0.0.4

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlowNode/CustomLineNode.tsx

@@ -0,0 +1,130 @@
+import LogicFlow, {
+  GraphModel,
+  h,
+  RectNode,
+  RectNodeModel,
+} from '@logicflow/core';
+
+// 自定义矩形节点
+class LineNode extends RectNode {
+  static extendKey = 'UserLineNode';
+
+  // 重写节点文本方法，重写后getTextStyle将不生效
+  getShape = (): h.JSX.Element => {
+    const { model } = this.props;
+    const { x, y, width, height, properties } = model;
+    const style = model.getNodeStyle();
+    const { wsData } = properties as any;
+
+    return h('g', {}, [
+      h('rect', {
+        ...style,
+        x: x - width / 2,
+        y: y - height / 2,
+        rx: 0,
+        ry: 0,
+        width,
+        height: model.properties.height,
+        stroke: 'transparent',
+        fill: model.properties.fill,
+      }),
+    ]);
+  };
+
+  getText(): h.JSX.Element | null {
+    return null;
+  }
+}
+class LineNodeModel extends RectNodeModel {
+  // 初始化配置数据
+  constructor(data: LogicFlow.NodeData, graphModel: GraphModel) {
+    super(data, graphModel);
+    const { anchor } = graphModel.theme;
+
+    this.properties = {
+      ...this.getNodeStyle(),
+      modelType: this.modelType,
+      width: this.width,
+      height: 1,
+      fill: '#000',
+      textStyle: { ...this.getTextStyle() },
+      outlineStyle: { ...this.getOutlineStyle() },
+      anchorStyle: {
+        ...super.getAnchorStyle(),
+        hover: {
+          strokeWidth: 1,
+          ...anchor.hover,
+        },
+      },
+      ...this.properties,
+    };
+  }
+
+  setAttributes() {
+    const style = super.getNodeStyle();
+    const {
+      fill = style.fill,
+      stroke = style.stroke,
+      strokeWidth = style.strokeWidth,
+      radius = style.radius,
+      width = this.width,
+      height = 5,
+    } = this.properties as any;
+    this.resizable = false;
+    this.radius = radius;
+    this.width = width;
+    this.height = height;
+    this.style.fill = fill;
+    this.style.stroke = stroke;
+    this.style.strokeWidth = strokeWidth;
+  }
+
+  //  自定义节点样式
+  getNodeStyle() {
+    const style = super.getNodeStyle();
+    const { stroke = '#000' } = this.properties;
+    // @ts-ignore
+    style.stroke = stroke;
+    return style;
+  }
+
+  // 自定义文本样式
+  getTextStyle() {
+    const style = super.getTextStyle();
+    const { color = '#000', fontSize = 12 } =
+      this.properties?.textStyle || ({} as any);
+    style.color = color;
+    style.fontSize = fontSize;
+    return style;
+  }
+
+  // 自定义节点轮廓框的样式属性
+  getOutlineStyle() {
+    const {
+      stroke = '#949494',
+      strokeWidth = 1,
+      hover,
+    } = this.properties?.outlineStyle || ({} as any);
+    const style = super.getOutlineStyle();
+    const newStyle = Object.assign({}, style, {
+      stroke,
+      strokeWidth,
+      hover: {
+        strokeWidth: hover?.strokeWidth || 1,
+        stroke: hover?.stroke || '#949494',
+      },
+    });
+    return newStyle;
+  }
+
+  // 定义锚点数量，位置
+  getDefaultAnchor() {
+    return [];
+  }
+}
+
+export default {
+  type: 'custom-line-node',
+  view: LineNode,
+  model: LineNodeModel,
+};

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlowNode/CustomMachineImageNode.tsx

@@ -0,0 +1,271 @@
+import machine from '@/assets/machine.jpg';
+import { ExtraMachinePropertiesType } from '@/pages/BaseManagement/WorkshopMachineFloorPlan/data';
+import LogicFlow, {
+  GraphModel,
+  h,
+  IRectNodeProperties,
+  IRectNodeProps,
+  RectNode,
+  RectNodeModel,
+} from '@logicflow/core';
+import { cfmmUtils } from '@umijs/max';
+
+export interface CustomMachineNodeProperties extends IRectNodeProperties {
+  id?: number;
+  imageHref?: string;
+  data?: ExtraMachinePropertiesType;
+  labelStyle?: IRectNodeProperties['textStyle'];
+  rules?: Record<string, any>;
+}
+
+interface RectNodeType extends IRectNodeProps {
+  model: { properties: CustomMachineNodeProperties } & RectNodeModel;
+}
+
+export const MACHINE_NODE_TYPE = 'custom-image-machine-node';
+
+// 自定义图片节点
+class CustomImageNode extends RectNode<RectNodeType> {
+  // 重用canvas，不要每次都创建
+  canvas: any;
+  canvasContext: any;
+  // 机器编号
+  getLabelShape() {
+    const { model } = this.props;
+    const { x, y, height, properties } = model;
+    const textStyle = model.getTextStyle();
+    const { text, textStyle: propertiesTextStyle = {} } = properties;
+
+    return h(
+      'text',
+      {
+        fill: propertiesTextStyle.color || textStyle.color,
+        fontSize: propertiesTextStyle.fontSize || textStyle.fontSize,
+        lineHeight: propertiesTextStyle.lineHeight || textStyle.lineHeight,
+        x: x,
+        y: y + height / 2 + 20,
+        textAnchor: 'middle',
+      },
+      text ?? '',
+    );
+  }
+
+  // 机器生产状态
+  getLabelShape2() {
+    const { model } = this.props;
+    const { x, y, height, properties } = model;
+    const { labelStyle = {} } = properties;
+
+    const { machineStatusName = 'unknown', statusColorCode } = properties.data?.machineStatusLog || {};
+
+    const tagFillColor = statusColorCode || labelStyle?.color || '#fafafa';
+    const fontSize = (labelStyle?.fontSize as number) || 14; // 使用默认字体大小
+    const padding = 10; // Tag 内部填充
+
+    // 创建一个 canvas 元素来测量文本宽度
+    this.canvas = this.canvas ?? document.createElement('canvas');
+    const context = this.canvas.getContext('2d');
+    if (context) {
+      context.font = `${fontSize}px sans-serif`; // 设置字体样式
+      const textWidth = context.measureText(machineStatusName).width; // 获取文本宽度
+
+      const tagWidth = textWidth + padding * 2; // Tag 的宽度
+      const tagHeight = fontSize + padding; // Tag 的高度
+
+      // 反转颜色逻辑
+      const rgb = cfmmUtils.hexToRgb(tagFillColor as string);
+      const textColor = cfmmUtils.isDarkBackground(rgb) ? '#fff' : '#000'; // 如果背景色较暗，文本为白色；否则为黑色
+
+      // 清空 canvas
+      context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+      return h(
+        'g',
+        {
+          transform: `translate(${x - tagWidth / 2}, ${y - height / 2 - 30})`,
+        },
+        [
+          h('rect', {
+            width: tagWidth,
+            height: tagHeight,
+            fill: tagFillColor,
+            rx: 5, // 圆角半径
+            ry: 5,
+          }),
+          h(
+            'text',
+            {
+              fill: textColor, // Tag 内部文本颜色
+              fontSize: fontSize,
+              x: tagWidth / 2,
+              y: tagHeight / 2 + 5, // 调整文本垂直居中
+              textAnchor: 'middle',
+            },
+            machineStatusName,
+          ),
+        ],
+      );
+    }
+
+    // 如果无法获取上下文，返回空
+    return h(
+      // @ts-ignore
+      'text',
+      {
+        fill: statusColorCode || labelStyle?.color || '#000',
+        fontSize: labelStyle?.fontSize,
+        lineHeight: labelStyle?.lineHeight,
+        x: x,
+        y: y - height / 2 - 10,
+        textAnchor: 'middle',
+      },
+      machineStatusName,
+    );
+  }
+
+  getShape = (): h.JSX.Element => {
+    const { model } = this.props;
+    const { x, y, width, height, radius } = model;
+    const href = this.getImageHref();
+    const style = model.getNodeStyle();
+    return h('g', {}, [
+      h('image', {
+        ...style,
+        x: x - width / 2,
+        y: y - height / 2,
+        rx: radius,
+        ry: radius,
+        width,
+        height,
+        href,
+        // 根据宽高缩放
+        preserveAspectRatio: 'none meet',
+      }),
+      this.getLabelShape(),
+      this.getLabelShape2(),
+    ]);
+  };
+
+  getImageHref = (): string => {
+    return '';
+  };
+  getText(): h.JSX.Element | null {
+    return null;
+  }
+}
+
+class CustomImageNodeModel extends RectNodeModel<CustomMachineNodeProperties> {
+  // 初始化配置数据
+  constructor(data: LogicFlow.NodeData, graphModel: GraphModel) {
+    super(data, graphModel);
+    const { anchor } = graphModel.theme;
+
+    const rules = {
+      canConnectOut: true,
+      canConnectIn: true,
+    };
+    
+    this.properties = {
+      ...this.getNodeStyle(),
+      rules,
+      modelType: this.modelType,
+      width: this.width,
+      textStyle: { ...this.getTextStyle() },
+      outlineStyle: { ...this.getOutlineStyle() },
+      anchorStyle: {
+        ...super.getAnchorStyle(),
+        hover: {
+          strokeWidth: 1,
+          ...anchor.hover,
+        },
+      },
+      ...this.properties,
+    };
+  }
+
+  setAttributes() {
+    const style = super.getNodeStyle();
+    const {
+      fill = style.fill,
+      stroke = style.stroke,
+      strokeWidth = style.strokeWidth,
+      radius = style.radius,
+      width = this.width,
+      height = style.height,
+    } = this.properties as any;
+    
+    this.radius = radius;
+    this.width = width;
+    this.height = height ?? this.height;
+    this.style.fill = fill;
+    this.style.stroke = stroke;
+    this.style.strokeWidth = strokeWidth;
+  }
+
+  // 自定义文本样式
+  getTextStyle() {
+    const style = super.getTextStyle();
+    const { color = '#000', fontSize = 12 } = this.properties?.textStyle || ({} as any);
+    style.color = color;
+    style.fontSize = fontSize;
+    return style;
+  }
+
+  // 自定义节点轮廓框的样式属性
+  getOutlineStyle() {
+    const { stroke = '#949494', strokeWidth = 1, hover } = this.properties?.outlineStyle || ({} as any);
+    const style = super.getOutlineStyle();
+    const newStyle = Object.assign({}, style, {
+      stroke,
+      strokeWidth,
+      hover: {
+        strokeWidth: hover?.strokeWidth || 1,
+        stroke: hover?.stroke || '#949494',
+      },
+    });
+    return newStyle;
+  }
+
+  // 自定义锚点样式
+  getAnchorStyle() {
+    const style = super.getAnchorStyle();
+    const {
+      fill = style.fill,
+      r = style.r,
+      stroke = style.stroke,
+      strokeWidth = style.strokeWidth,
+      hover,
+    } = this.properties?.anchorStyle || ({} as any);
+
+    style.r = r;
+    style.fill = fill;
+    style.stroke = stroke;
+    style.strokeWidth = strokeWidth;
+    if (style.hover) {
+      style.hover.r = hover?.r || style.hover?.r;
+      style.hover.fill = hover?.fill || style.hover?.fill;
+      style.hover.stroke = hover?.stroke || style.hover?.stroke;
+      style.hover.strokeWidth = hover?.strokeWidth || (style.hover?.stroke as any);
+    }
+    return style;
+  }
+}
+
+export const CustomImage = {
+  type: 'customImage',
+  view: CustomImageNode,
+  model: CustomImageNodeModel,
+};
+
+// 图片节点
+class CloudImageNode extends CustomImage.view {
+  getImageHref = () => {
+    return machine;
+  };
+}
+
+export default {
+  type: MACHINE_NODE_TYPE,
+  view: CloudImageNode,
+  model: CustomImage.model,
+};

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlowNode/CustomPolylineEdge.tsx

@@ -0,0 +1,201 @@
+import { GraphModel, h, LogicFlow, PolylineEdge, PolylineEdgeModel } from '@logicflow/core';
+import EdgeTextTheme = LogicFlow.EdgeTextTheme;
+
+// 自定义折线
+class CustomPolyline extends PolylineEdge {
+  // 自定义边，过于复杂，不建议自定义边
+  // getEdge() {
+
+  // }
+
+  // getStartArrow() {
+  //   // 自定义开始箭头
+  // }
+
+  // 自定义结束箭头
+  getEndArrow() {
+    const { model } = this.props;
+    const {
+      properties: { arrowType, arrowStyle = {}, arrowAnimationStyle = {}, arrowPath },
+      isAnimation,
+    } = model;
+
+    const defaultStyle = model.getArrowStyle();
+    const edgeAnimationStyles = model.getEdgeAnimationStyle();
+    const allStyle = { ...defaultStyle, ...arrowStyle };
+
+    const pathAttr = {
+      ...allStyle,
+      // 开启动画时，没有配置箭头动画样式则默认跟随边的配置
+      fill: isAnimation ? arrowAnimationStyle.fill || edgeAnimationStyles.stroke || allStyle.fill : allStyle.fill,
+      stroke: isAnimation
+        ? arrowAnimationStyle.stroke || edgeAnimationStyles.stroke || allStyle.stroke
+        : allStyle.stroke,
+      strokeWidth: isAnimation ? arrowAnimationStyle.strokeWidth || allStyle.strokeWidth : allStyle.strokeWidth,
+    };
+
+    if (arrowPath && arrowType === 'custom') {
+      return h('path', {
+        ...pathAttr,
+        d: arrowPath,
+      });
+    }
+    // 无箭头
+    if (arrowType === 'none') {
+      return null;
+    }
+
+    if (arrowType === 'empty') {
+      // 空心箭头
+      return h('path', {
+        ...pathAttr,
+        fill: '#FFF',
+        d: 'M 0,0  -20,-5 -30,0 -20,5 z',
+      });
+    } else if (arrowType === 'half') {
+      // 半箭头
+      return h('path', {
+        ...pathAttr,
+        d: 'M 0,0 -10,5',
+      });
+    }
+    return h('path', {
+      ...pathAttr,
+      d: 'M 0 0 -10 -5 -10 5 z',
+    });
+  }
+}
+
+class CustomPolylineModel extends PolylineEdgeModel {
+  constructor(data: LogicFlow.EdgeData, graphModel: GraphModel) {
+    super(data, graphModel);
+    const edgeAnimationStyles = this.getEdgeAnimationStyle();
+    const edgeStyles = this.getEdgeStyle();
+
+    this.properties = {
+      ...edgeStyles,
+      modelType: this.modelType,
+      arrowType: 'defautl',
+      lineType: 'solid',
+      strokeDasharray: [[5, 5]],
+      arrowAnimationStyle: {
+        ...edgeAnimationStyles,
+        stroke: '#008000',
+      },
+      lineAnimationStyle: {
+        ...edgeAnimationStyles,
+        animationDuration: edgeAnimationStyles.animationDuration?.replace('s', ''),
+        stroke: '#008000',
+        strokeWidth: edgeStyles.strokeWidth,
+        strokeDasharray: [[5, 5]],
+      },
+      textStyle: { ...this.getTextStyle() },
+      outlineStyle: { ...this.getOutlineStyle() },
+      arrowStyle: { ...this.getArrowStyle() },
+      ...this.properties,
+    };
+  }
+
+  setAttributes() {
+    const { pointsList = [] } = this.properties as any;
+    // this.radius = radius;  // 不生效
+    if (pointsList.length) {
+      this.points = pointsList.map((item: any) => `${item.x},${item.y}`).join(' ');
+    }
+  }
+
+  // 设置边样式
+  getEdgeStyle() {
+    const style = super.getEdgeStyle();
+    const {
+      stroke = style.stroke,
+      strokeWidth = style.strokeWidth,
+      strokeDasharray = [],
+      lineType,
+      lineAnimationStyle,
+    } = this.properties;
+    style.stroke = stroke;
+    style.strokeWidth = this.isAnimation ? lineAnimationStyle.strokeWidth || strokeWidth : strokeWidth;
+
+    if (lineType === 'dashed' && strokeDasharray.length) {
+      // 虚线， '4,4' , 第一个表示每一节线长度， 第二个表示线与线之间的间隔
+      style.strokeDasharray = strokeDasharray.map((item: any) => [item[0], item[1]]).join(' ');
+    }
+    return style;
+  }
+
+  // 设置边文本样式
+  getTextStyle() {
+    const style: EdgeTextTheme = super.getTextStyle();
+    const {
+      color = '#000',
+      fontSize = 12,
+      backgroundColor = '#fff',
+    } = this.properties?.textStyle || ({} as LogicFlow.PropertiesType);
+    style.color = color;
+    style.fontSize = fontSize;
+    style.background = Object.assign({}, style.background, {
+      fill: backgroundColor,
+    });
+    return style;
+  }
+
+  // 自定义边hover轮廓框的样式属性
+  getOutlineStyle() {
+    const { stroke = '#949494', strokeWidth = 1 } = this.properties?.outlineStyle || ({} as LogicFlow.PropertiesType);
+    const style = super.getOutlineStyle();
+    const newStyle = Object.assign({}, style, {
+      stroke,
+      strokeWidth,
+    });
+    return newStyle;
+  }
+
+  // 自定义箭头样式，初始化有用
+  // getArrowStyle(): LogicFlow.ArrowTheme {
+  //   const style = super.getArrowStyle();
+  //   style.fill = this.isAnimation ? '#FF6347' : style.fill; //不生效，需要在view中getEndArrow || getStartArrow配置
+  //   return style
+  // }
+
+  // hover开启动画
+  // setHovered(isHovered: boolean) {
+  //   super.setHovered(isHovered);
+  //   this.isAnimation = isHovered;
+  // }
+
+  // 边的动画样式
+  // getEdgeAnimationStyle() {
+  //   const style = super.getEdgeAnimationStyle();
+  //   style.animationName = 'lf_animate_dash';
+  //   return style;
+  // }
+
+  // 边的动画样式
+  getEdgeAnimationStyle() {
+    const style = super.getEdgeAnimationStyle();
+    if (this.properties?.lineAnimationStyle) {
+      const { stroke, strokeDasharray, animationDuration } = this.properties?.lineAnimationStyle;
+
+      if (strokeDasharray?.length) {
+        style.strokeDasharray = strokeDasharray.map((item: any) => [item[0], item[1]]).join(' ');
+      }
+      style.animationDuration = `${animationDuration}s`; //动画时长，越短动画越快
+      style.stroke = stroke;
+    }
+
+    return style;
+  }
+
+  // 文本位置
+  // getTextPosition() {
+  //   const position = super.getTextPosition();
+  //   return position;
+  // }
+}
+
+export default {
+  type: 'custom-polyline-edge',
+  view: CustomPolyline,
+  model: CustomPolylineModel,
+};

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlowNode/CustomTextNode.tsx

@@ -0,0 +1,60 @@
+import LogicFlow, { GraphModel, TextNode, TextNodeModel } from '@logicflow/core';
+
+// 自定义文本节点
+class CustomTextNodeModel extends TextNodeModel {
+  // 初始化配置数据
+  constructor(data: LogicFlow.NodeData, graphModel: GraphModel) {
+    super(data, graphModel);
+
+    this.properties = {
+      modelType: this.modelType,
+      textStyle: { ...this.getTextStyle() },
+      outlineStyle: { ...this.getOutlineStyle() },
+      ...this.properties,
+    };
+  }
+
+  //  自定义节点样式
+  // getNodeStyle() {
+  //   const style = super.getNodeStyle();
+  //   const { stroke = style.stroke } = this.properties;
+  //   style.stroke = stroke;
+  //   return style;
+  // }
+
+  // 自定义文本样式
+  getTextStyle() {
+    const style = super.getTextStyle();
+    const { color = '#000', fontSize = 12 } =
+      this.properties?.textStyle || ({} as any);
+    style.color = color;
+    style.fontSize = fontSize;
+    return style;
+  }
+
+  // 自定义节点轮廓框的样式属性
+  getOutlineStyle() {
+    const {
+      stroke = '#949494',
+      strokeWidth = 1,
+      hover,
+    } = this.properties?.outlineStyle || ({} as any);
+
+    const style = super.getOutlineStyle();
+    const newStyle = Object.assign({}, style, {
+      stroke,
+      strokeWidth,
+      hover: {
+        strokeWidth: hover?.strokeWidth || 1,
+        stroke: hover?.stroke || '#949494',
+      },
+    });
+    return newStyle;
+  }
+}
+
+export default {
+  type: 'custom-text-node',
+  view: TextNode,
+  model: CustomTextNodeModel,
+};

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlowNode/index.ts

@@ -0,0 +1,13 @@
+import CustomPolylineEdge from './CustomPolylineEdge';
+import CustomTextNode from './CustomTextNode';
+import CustomGroupNode from './CustomGroupNode';
+import CustomMachineImageNode from './CustomMachineImageNode';
+import CustomLineNode from './CustomLineNode';
+
+export {
+  CustomPolylineEdge,
+  CustomTextNode,
+  CustomGroupNode,
+  CustomMachineImageNode,
+  CustomLineNode,
+};