update code

src/components/flow/FlowLink.js

@@ -1,18 +1,26 @@
 import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core";
 
 class FlowLinkModel extends PolylineEdgeModel {
-    getEdgeStyle() {
+  getEdgeStyle() {
     const style = super.getEdgeStyle();
     style.strokeWidth = 1;
-    style.stroke = this.isSelected ? '#ff7f0e' : '#999';
+    style.stroke = this.isSelected ? "#ff7f0e" : "#999";
+    return style;
+  }
+  setAttributes() {
+    this.isAnimation = true;
+  }
+  getEdgeAnimationStyle() {
+    const style = super.getEdgeAnimationStyle();
+    style.strokeDasharray = "5 5";
+    style.animationDuration = "60s";
     return style;
   }
 }
 class FlowLink extends PolylineEdge {}
 
 export default {
-  type: 'ai-link',
+  type: "ai-link",
   view: FlowLink,
-  model: FlowLinkModel
-}
-
+  model: FlowLinkModel,
+};

src/components/flow/nodes/BaseNode.js

@@ -8,7 +8,7 @@ class RedNodeModel extends RectNodeModel {
   initNodeData(data) {
     super.initNodeData(data);
     this.width = 200;
-    this.height = 30;
+    this.height = 36;
     this.radius = 5;
     this.text.x = this.x + 10;
     this.defaultFill = data.fill || "rgb(253, 208, 162)";
@@ -51,7 +51,7 @@ class RedNodeModel extends RectNodeModel {
    * 重写定义锚点
    */
   getDefaultAnchor() {
-    const { x, y, id, width, height } = this;
+    const { x, y, id, width, height } = this;    
     const anchors = [
       {
         x: x,
@@ -91,14 +91,28 @@ class RedNode extends RectNode {
   getAnchorShape(anchorData) {
     const { x, y, type, className } = anchorData;
     if(type=="start"){
+      return h("svg",{
+        viewBox:"0 0 1139 1024" ,
+        width:20,
+        height:20,
+        x: x - 10,
+        y: y - 16,
+      },
+        h("path",{
+          fill:"#0bdd0b",
+          d:"M0 512.007221a511.992418 511.992418 0 1 1 511.631351 511.992418A512.353484 512.353484 0 0 1 0 512.007221z m730.437702 120.235173c0-97.126911-62.464519-131.06717-146.593034-161.75783l-66.797318-25.996794c-53.437855-20.941862-87.378114-38.273058-87.378114-77.629316 0-45.133323 36.106659-70.046917 93.155179-70.046917a227.471949 227.471949 0 0 1 139.732769 54.521054l57.04852-72.213317a298.963132 298.963132 0 0 0-196.059156-72.213317c-121.318373 0-206.530087 63.547719-206.530086 164.285296 0 84.128514 67.880518 128.900771 144.426634 157.425031l67.880518 27.079994c49.105056 18.775462 86.294914 36.106659 86.294914 84.489581s-36.106659 74.379717-100.737578 74.379717a269.355672 269.355672 0 0 1-173.673027-70.046918L285.242602 722.50904a344.096456 344.096456 0 0 0 225.305549 81.962115c136.844236-0.361067 219.88955-74.740783 219.889551-172.228761z"
+        }),        
+      )
+      /*
       return h( "circle", {        
         cx: x - 0,
         cy: y - 5,
         r:6,
         className: "custom-anchor " + className,
         title:'开始'
-      });  
+      });  */
     }
+    /*
     return h( "rect", {
       x: x - 5,
       y: y - 5,      
@@ -106,7 +120,19 @@ class RedNode extends RectNode {
       height: 10,
       className: "custom-anchor " + className,
       title:'结束'
-    });
+    });*/
+    return h("svg",{
+      viewBox:"0 0 1139 1024" ,
+      width:24,
+      height:24,
+      x: x - 10,
+      y: y - 8,
+    },
+      h("path",{
+        fill:"#ffb01f",
+        d:"M810.667 128H213.333C166.187 128 128 166.187 128 213.333v597.334C128 857.813 166.187 896 213.333 896h597.334C857.813 896 896 857.813 896 810.667V213.333C896 166.187 857.813 128 810.667 128zM640 384H469.333v85.333H640v85.334H469.333V640H640v85.333H384V298.667h256V384z"
+      }),        
+    )
   }
   getShape() {
     const { text, x, y, width, height, radius } = this.props.model;

src/views/connection/editFlow.vue

@@ -108,6 +108,7 @@ onMounted(() => {
         container: flow.value
     })
     lf.value = logicFlow
+    logicFlow.setDefaultEdgeType("ai-link");
     RegisteMenu(logicFlow)
     initEvent(logicFlow);
     emit("initLf",lf);