lloydzhou · lloydzhou · May 24, 2023 · May 25, 2023 · May 25, 2023 · May 25, 2023
diff --git a/babel.config.js b/babel.config.js
diff --git a/example/App.vue b/example/App.vue
@@ -24,9 +24,9 @@
         </x6-port-group>
       </x6-node>
       <Edge id="e1" source="1" target="2" @added="added" label="edge1" />
-      <VueShape primer="rect" id="3" :x="200" :y="300" :width="160" :height="60" :attrs="{rect: {fill: '#ddd', stroke: '#333'}, label: {text: 'VueShape'}}" @added="added" @cell:change:zIndex="changed">
+      <VueShape primer="rect" id="3" :x="200" :y="300" :width="160" :height="60" :attrs="{rect: {fill: '#ddd', stroke: '#333'}, label: {text: 'VueShape'}}" @added="added" @change:zIndex="changed">
         <div>这里是一个vue的组件</div>
-        <img style="width: 30px;height:30px;" src="https://v3.cn.vuejs.org/logo.png" />
+        <img style="width: 30px;height:30px;" src="https://vitejs.dev/logo.svg" />
         <template #port>
         <PortGroup name="in" position="top" :attrs="{circle: {r: 6, magnet: true, stroke: '#31d0c6'}}">
           <Port id="id1" />
@@ -35,7 +35,7 @@
         </template>
       </VueShape>
       <VueShape id="444" :x="500" :y="500" :data="{num: 2}" :height="60" :attrs="{rect: {stroke: '#333'}}" :component="CustomNodeComponent" />
-      <CustomNode v-if="visible" primer="circle" id="4" :x="400" :width="100" :height="100" :y="y" :attrs="{circle: {fill: '#ddd', stroke: '#333'}}" @added="added" @click="click" @cell:change:position="changed" :magnet="true" >
+      <CustomNode v-if="visible" primer="circle" id="4" :x="400" :width="100" :height="100" :y="y" :attrs="{circle: {fill: '#ddd', stroke: '#333'}}" @added="added" @click="click" @change:position="changed" :magnet="true" >
         <span style="text-align: center;display: inline-block;width: 100%;margin-top: 20px;">Hello {{name}}</span>
       </CustomNode>
       <Edge id="e2" source="1" target="3" @added="added" />
@@ -86,7 +86,7 @@ import { defineComponent, ref, h, markRaw } from 'vue'
 import { inject } from 'vue'
 import { Options, Vue } from 'vue-class-component';
 import { Port, PortGroup, TeleportContainer } from '../src/index'
-import Graph, { Node, Edge, VueShape, useVueShape, VueShapeProps, GraphContext, useCellEvent } from '../src/index'
+import Graph, { Node, Edge, VueShape, useVueShape, GraphContext } from '../src/index'
 import { Grid, Background, Clipboard, Snapline, Selection, Keyboard, Scroller, MouseWheel, MiniMap } from '../src/index'
 import { Stencil, StencilGroup } from '../src/index'
 import { ContextMenu } from '../src/index'
@@ -106,7 +106,7 @@ const CustomNodeComponent = defineComponent({
       min: 1,
       value: props.data.num,
       onChange: (num) => {
-        console.log(props.node)
+        console.log(props.node, num)
         props.node.setData({ num })
       }
     })
@@ -115,11 +115,10 @@ const CustomNodeComponent = defineComponent({
 
 const CustomNode = defineComponent({
   name: 'CustomNode',
-  props: [...VueShapeProps, 'otherOptions'],
   inject: [contextSymbol],
-  setup(props, context) {
-    const cell = useVueShape({ ...props, data: { num: 2 }, component: markRaw(CustomNodeComponent) }, context)
-    useCellEvent('node:click', (e) => context.emit('click', e), { cell })
+  setup(_, context) {
+    const cell = useVueShape({ ...context.attrs, data: { num: 2 }, component: markRaw(CustomNodeComponent) }, context)
+    // useCellEvent('node:click', (e) => context.emit('click', e), { cell })
     return () => null
   }
 })

diff --git a/example/Dag.vue b/example/Dag.vue
@@ -0,0 +1,275 @@
+<template>
+  <div className="App">
+    <Graph
+      :panning="{ enabled: true, eventTypes: ['leftMouseDown', 'mouseWheel'] }"
+      :highlighting="highlighting"
+      :connecting="connecting"
+      :height="600"
+    >
+      <Grid />
+      <Background />
+      <MouseWheel
+        modifiers="ctrl"
+        :factor="1.1"
+        :maxScale="1.5"
+        :minScale="1.5"
+      />
+      <Clipboard />
+      <!-- <Selection
+        :multiple="true"
+        :rubberEdge="true"
+        :rubberNode="true"
+        :modifiers='["shift"]'
+        :rubberband="true"
+      /> -->
+      <Keyboard />
+      <VueShape
+        v-for="node in nodes"
+        :id="node.id"
+        :key="node.id"
+        :autoResize="true"
+        shape="dag-node"
+        :ports="{ ...portConfig, items: node.ports }"
+        :data="{ ...node.data }"
+        :component="AlgoNode"
+        :x="node.x"
+        :y="node.y"
+      />
+      <Edge
+        v-for="edge in edges"
+        :key="edge.id"
+        shape="dag-edge"
+        :source="edge.source"
+        :target="edge.target"
+        :zIndex="edge.zIndex"
+      />
+    </Graph>
+    <TeleportContainer />
+  </div>
+</template>
+
+<script>
+import { defineComponent, reactive, toRefs, onMounted, ref } from "vue";
+import Graph, {
+  Grid,
+  Background,
+  Clipboard,
+  Selection,
+  Keyboard,
+  MouseWheel,
+  Edge,
+  VueShape,
+  TeleportContainer,
+} from "../src/index";
+import "./x6";
+import AlgoNode from "./Node.vue";
+import { dagdata, statusList } from "./data";
+
+// hotfix
+// window.Fragment = Fragment;
+
+export default defineComponent({
+  name: "App",
+  components: {
+    Graph,
+    Grid,
+    Background,
+    Clipboard,
+    Selection,
+    Keyboard,
+    MouseWheel,
+    Edge,
+    VueShape,
+    TeleportContainer,
+  },
+  setup(props) {
+    const state = reactive({
+      nodes: dagdata.filter((i) => i.shape === "dag-node"),
+      edges: dagdata.filter((i) => i.shape === "dag-edge"),
+    });
+    const timer = ref();
+
+    const showNodeStatus = () => {
+      const status = statusList.shift();
+      // console.log('showNodeStatus', status)
+      if (!status) {
+        clearInterval(timer.value);
+        return;
+      }
+      status.forEach((item) => {
+        const { id, status } = item;
+        state.nodes = state.nodes.map((node) => {
+          if (node.id === id) {
+            node.data = { ...node.data, status };
+          }
+          return node;
+        });
+        console.log('nodes', state.nodes, state.nodes.map(i => i.data.status))
+      });
+    };
+
+    onMounted(() => {
+      showNodeStatus();
+      timer.value = setInterval(showNodeStatus, 3000);
+      return () => {
+        clearInterval(timer.value);
+      };
+    });
+
+    return {
+      ...toRefs(state),
+      AlgoNode,
+      highlighting: {
+        magnetAdsorbed: {
+          name: "stroke",
+          args: {
+            attrs: {
+              fill: "#fff",
+              stroke: "#31d0c6",
+              strokeWidth: 4,
+            },
+          },
+        },
+      },
+      connecting: {
+        snap: true,
+        allowBlank: false,
+        allowLoop: false,
+        highlight: true,
+        connector: "algo-connector",
+        connectionPoint: "anchor",
+        anchor: "center",
+        validateMagnet({ magnet }) {
+          return magnet.getAttribute("port-group") !== "top";
+        },
+        createEdge({ sourceCell }) {
+          return sourceCell.model.graph.createEdge({
+            shape: "dag-edge",
+            attrs: {
+              line: {
+                strokeDasharray: "5 5",
+              },
+            },
+            zIndex: -1,
+          });
+        },
+      },
+      portConfig: {
+        groups: {
+          top: {
+            position: "top",
+            attrs: {
+              circle: {
+                r: 4,
+                magnet: true,
+                stroke: "#C2C8D5",
+                strokeWidth: 1,
+                fill: "#fff",
+              },
+            },
+          },
+          bottom: {
+            position: "bottom",
+            attrs: {
+              circle: {
+                r: 4,
+                magnet: true,
+                stroke: "#C2C8D5",
+                strokeWidth: 1,
+                fill: "#fff",
+              },
+            },
+          },
+        },
+      },
+    };
+  },
+});
+</script>
+
+<style>
+* {
+  box-sizing: content-box;
+}
+.App {
+  font-family: sans-serif;
+  text-align: center;
+  height: 600px;
+  min-height: 600px;
+}
+.node {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 45px;
+  background-color: #fff;
+  border: 1px solid #c2c8d5;
+  border-left: 4px solid #5f95ff;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
+}
+.node img {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.node .label {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 104px;
+  margin-left: 8px;
+  color: #666;
+  font-size: 12px;
+}
+.node .status {
+  flex-shrink: 0;
+}
+.node.success {
+  border-left: 4px solid #52c41a;
+}
+.node.failed {
+  border-left: 4px solid #ff4d4f;
+}
+.node.running .status img {
+  animation: spin 1s linear infinite;
+}
+.x6-node-selected .node {
+  border-color: #1890ff;
+  border-radius: 2px;
+  box-shadow: 0 0 0 4px #d4e8fe;
+}
+.x6-node-selected .node.success {
+  border-color: #52c41a;
+  border-radius: 2px;
+  box-shadow: 0 0 0 4px #ccecc0;
+}
+.x6-node-selected .node.failed {
+  border-color: #ff4d4f;
+  border-radius: 2px;
+  box-shadow: 0 0 0 4px #fedcdc;
+}
+.x6-edge:hover path:nth-child(2) {
+  stroke: #1890ff;
+  stroke-width: 1px;
+}
+
+.x6-edge-selected path:nth-child(2) {
+  stroke: #1890ff;
+  stroke-width: 1.5px !important;
+}
+
+@keyframes running-line {
+  to {
+    stroke-dashoffset: -1000;
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
+