Merge branch 'dev' of https://cloud.wodcloud.com/git/apaas/apaas-v3-ui into dev

src/components/work-flow/work-flow.vue

+<template>
+  <div class="topo_inner">
+    <div id="container" ref="conCav" class="canvas"></div>
+  </div>
+</template>
+
+<script>
+import G6 from "@antv/g6";
+export default {
+  props: {
+    datas: {
+      type: Object,
+      default: () => {
+        return {
+          nodes: [],
+          edges: [],
+        };
+      },
+    },
+    namespace: String,
+  },
+  data: () => {
+    return {
+      options: [
+        {
+          value: "default",
+          label: "default",
+        },
+        {
+          value: "addNode",
+          label: "addNode",
+        },
+        {
+          value: "addEdge",
+          label: "addEdge",
+        },
+      ],
+      value: "",
+      graph: null,
+    };
+  },
+  mounted() {
+    this.getCav();
+  },
+  watch: {
+    datas(val) {},
+  },
+  methods: {
+    getCav() {
+      /**
+       * 该案例演示切换交互模式，在不同模式下实现拖动节点、增加节点、增加边的交互行为。
+       */
+      let addedCount = 0;
+      // Register a custom behavior: add a node when user click the blank part of canvas
+      G6.registerBehavior("click-add-node", {
+        // Set the events and the corresponding responsing function for this behavior
+        getEvents() {
+          // The event is canvas:click, the responsing function is onClick
+          return {
+            "canvas:click": "onClick",
+          };
+        },
+        // Click event
+        onClick(ev) {
+          console.log(ev.canvasX, ev.canvasY);
+          const self = this;
+          const graph = self.graph;
+          // Add a new node
+          graph.addItem("node", {
+            x: ev.canvasX,
+            y: ev.canvasY,
+            id: `node-${addedCount}`, // Generate the unique id
+          });
+          addedCount++;
+        },
+      });
+      // Register a custom behavior: click two end nodes to add an edge
+      G6.registerBehavior("click-add-edge", {
+        // Set the events and the corresponding responsing function for this behavior
+        getEvents() {
+          return {
+            "node:click": "onClick", // The event is canvas:click, the responsing function is onClick
+            mousemove: "onMousemove", // The event is mousemove, the responsing function is onMousemove
+            "edge:click": "onEdgeClick", // The event is edge:click, the responsing function is onEdgeClick
+          };
+        },
+        // The responsing function for node:click defined in getEvents
+        onClick(ev) {
+          const self = this;
+          const node = ev.item;
+          const graph = self.graph;
+          // The position where the mouse clicks
+          const point = { x: ev.x, y: ev.y };
+          const model = node.getModel();
+          if (self.addingEdge && self.edge) {
+            graph.updateItem(self.edge, {
+              target: model.id,
+            });
+
+            self.edge = null;
+            self.addingEdge = false;
+          } else {
+            // Add anew edge, the end node is the current node user clicks
+            self.edge = graph.addItem("edge", {
+              source: model.id,
+              target: model.id,
+            });
+            self.addingEdge = true;
+          }
+        },
+        // The responsing function for mousemove defined in getEvents
+        onMousemove(ev) {
+          const self = this;
+          // The current position the mouse clicks
+          const point = { x: ev.x, y: ev.y };
+          if (self.addingEdge && self.edge) {
+            // Update the end node to the current node the mouse clicks
+            self.graph.updateItem(self.edge, {
+              target: point,
+            });
+          }
+        },
+        // The responsing function for edge:click defined in getEvents
+        onEdgeClick(ev) {
+          const self = this;
+          const currentEdge = ev.item;
+          if (self.addingEdge && self.edge === currentEdge) {
+            self.graph.removeItem(self.edge);
+            self.edge = null;
+            self.addingEdge = false;
+          }
+        },
+      });
+      // Initial data
+      const data = {
+        nodes: [
+          {
+            id: "node1",
+            label: "123",
+            x: 100,
+            y: 200,
+          },
+          {
+            id: "node2",
+            label: "123",
+            x: 300,
+            y: 200,
+          },
+          {
+            id: "node3",
+            label: "123",
+            x: 300,
+            y: 300,
+          },
+        ],
+        edges: [
+          {
+            id: "edge1",
+            target: "node2",
+            source: "node1",
+          },
+        ],
+      };
+      const graphContainer = document.getElementById("container");
+      const width = document.getElementById("container").scrollWidth;
+      const height = document.getElementById("container").scrollHeight || 500;
+      const graph = new G6.Graph({
+        container: "container",
+        width,
+        height,
+        // The sets of behavior modes
+        modes: {
+          // Defualt mode
+          default: [
+            "drag-node",
+            "click-select",
+            "click-add-node",
+            "click-add-edge",
+            "zoom-canvas"
+          ],
+        },
+        defaultNode: {
+          type: "rect",
+          style: {
+            radius: 4,
+          },
+          anchorPoints: [
+            [0.5, 0],
+            [1, 0.5],
+            [0.5, 1],
+            [0, 0.5],
+          ],
+        },
+        // The node styles in different states
+        nodeStateStyles: {
+          // The node styles in selected state
+          selected: {
+            stroke: "#666",
+            lineWidth: 2,
+            fill: "steelblue",
+          },
+        },
+        defaultEdge: {
+          type: "line",
+          style: {
+            stroke: "#F6BD16",
+            endArrow: {
+              path: "M 0,0 L 20,10 L 20,-10 Z",
+              fill: "#F6BD16",
+            },
+          },
+        },
+      });
+      graph.data(data);
+      graph.render();
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.canvas {
+  height: 800px;
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+}
+.topo_inner {
+  position: relative;
+}
+</style>
+

src/pages/example/example_com_flow.vue

 <template>
   <div class="com_ex">
-    <SuperFlow />
+    <WorkFlow />
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import SuperFlow from "@/components/super-flow.vue";
+import WorkFlow from "@/components/work-flow/work-flow";
 export default {
   components: {
-    SuperFlow,
+    WorkFlow,
   },
   data: () => ({}),
   mounted() {},