I used setdata to set vue component,but the node in stencil also be setted

[mingmingshiliyu]

Describe the bug

the event data:change was triggerred twice,and the node in stencil changed the data the same as the node in graph

Your Example Website or App

none

Steps to Reproduce the Bug or Issue

var res =await getWorkfloStatusInfo({version: version,workflowProcessId:id})
        console.log(res)
        if (res.code!==0){
          ElMessage.error("运行状态查询失败,err:"+res.code)
        }
        res.data.moves.forEach((item)=>{
          console.log(item)
          // getNodeById(item.workflowNodeID)
          var node = demoGraph.value.graph.getCellById(item.workflowNodeID);
          console.log("node节点:",node)
          console.log("nodeid:",item.workflowNodeID)
          console.log("修改状态的node:",node.id)
          node.setData({status: item.status})
        })

vue component:

node.on('change:data', ({ current }) => {
        let { status } = current
        console.log("current:",current)
        console.log("node:",node)
        console.log("状态",status)
        statu.value = status
        console.log(statu.value)
      })

Expected behavior

the node in graph changed the status value but the node in stencil didn`t

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 2.11.1]

Additional context

No response

[mingmingshiliyu]

when I used node.setData which was filtered by getCellById,and the node in stencil which was same like the node in graph,their data were all changed

[NewByVector]

有可以复现的 demo 吗？

[mingmingshiliyu]

有可以复现的 demo 吗？
startNode.vue代码

<template>
  <div class="node" :class="statu">
    <!--    .node.running .status img {
      animation: spin 1s linear infinite;
    }-->
<!--    <img :src="image.success" />-->
    <span class="label">开始</span>
    <span class="status">
      <img v-if="statu === 'success'" :src="image.success" />
      <img  v-else-if="statu === 'failed'" :src="image.failed" />
      <img v-else-if="statu === 'running'" :src="image.running" />
      <img v-else-if="statu === 'end'" :src="image.running" />
    </span>
  </div>
</template>

<script >
import {defineProps, defineExpose, defineComponent, inject,ref, onMounted} from "vue";
import Icon from "@/view/superAdmin/menu/icon.vue";

const image = {
  end:
      "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ",
  logo: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
  success: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ',
  failed: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ',
  running: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t8fURKfgSOgAAAAAAAAAAAAAARQnAQ',
};

const statu=ref("success")
export default defineComponent({
  name: "actionNode",
  inject: ['getNode'],
  props: {
    graph: {
      type: Object,
      default: () => ({}),
    },
    node: {
      type: Object,
      default: () => ({}),
    },
    data: {
      type: Object,
      default: () => ({}),
    },
    statusParam: {
      type: String,
      default: 'running',
    }
  },
  data(){
    return{
      statu,
    }
  },

  setup(props){
    const getNode = inject('getNode');
    console.log(status)
    onMounted(()=>{
      console.log("状态1")
      console.log(status)
      const node = getNode();
      node.on('change:data', ({ current }) => {
        let { status } = current
        console.log("状态")
        console.log(status)
        statu.value = status
        console.log(statu.value)
      })

    })
    return {
      image,
      status,
    }
  }
})


</script>
<style scoped>
.node {
  display: flex;
  position: fixed;
  min-width: fit-content;
  align-items: center;
  width: 90px; /* 添加固定的宽度 */
  height: 90px; /* 添加固定的高度 */
  background-color: #fff;
  border: 1px solid #c2c8d5;
  border-left: 4px solid #5F95FF;
  border-radius: 50%;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
}

.node img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin-left: 8px;
}

.node .label {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  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;
}

.node.end .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>

父组件中引用startnode

register({
  shape: 'start-node',
  props: ['status'],
  width: 40,
  height: 40,
  component: startNode,
  ports: {
    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',
          },
        },
      },
    },
  },
})
start.value = graph.value.createNode({
    shape: 'start-node',
    x: 40,
    y: 40,
    width: 40,
    height: 40,
    data: {
      clazz: 'start',
      status: "success",
      assignType: 'user',
      assignValue: ',1,',
    },
    label: '开始节点',
    ports: {...ports},
  })
stencil.value.load([start.value], 'startEvent')

然后从stencil拖这个node到graph上,去获取这个graph里的node的id之后去调用setData就可以

var node = demoGraph.value.graph.getCellById(item.workflowNodeID);
          console.log("node节点:",node)
          node.setData({status: item.status})

因为我不知道怎么构建sandbox环境所以只给出了这些