Callback event after the antv X6 node is dragged onto the canvas (stepping on a big hole record)

use antv x6 Write a drag callback event to the node , At first, bind the double-click event on the canvas to the generation node event , It is found that the node passed after binding is not my own node , I didn't expect how to interact with the backend

const target = graph.createNode({
    width: 64,
    height: 92,
    shape: 'html',
    event: 'node:dblclick', //  Bound here dbclick, Can trigger but get antv Generated nodes that include our custom nodes , We can't get the information we set for the node 
    html: () => {}

Because after generation, we need to interact with the back end and tell the back end that we have generated this button , The back end returns to us id, Then we'll take this later id To interact with the backend , So I just want to say id Bound with my customized node （ In fact, this is wrong ！ It's too complicated to think about ！）

Then write the creation in the drag and drop completion event of the node , It's using graph.on('node:added',()=>{}) event , Then get the last assignment in the currently generated node array and send it back to id, Double click the node after binding , Interact

  graph.on('node:added', ({
      node }) => {
    
    const {
    
      x,
      y
    } = node.position()
    //  create a file 
    console.log(' Create success ', node)

    console.log('type', type)
    try {
    
      setLoading(true)
      createWorkflow({
    
        widget_type: type.typeId,
      }).then((res) => {
    
        const {
    
          data,
          code,
          msg
        } = res;
        if (code !== 200) {
    
          message.error(` I'm sorry ！${
      msg}`);
          return;
        }
        const wraps = document.getElementsByClassName('wrap');
        console.log(' After successful creation data', data)
        console.log('warp===========', wraps)
        const div_ = wraps[wraps.length - 1]
        console.log('div_=============', div_)
        let id = data.id
        div_.setAttribute('id',data.id)
        div_.setAttribute('nodeType',data.type)

        // const nodeId = document.getElementById(id)
        // nodeId.addEventListener('dblclick', function (id) {
    
        // alert(' Bind events through event listening ', id);
        // })
        setLoading(false)

      });
    } catch (err) {
    
      message.error(" The current network is not good , Please try again later ！");
      console.error(err);
    }
  })
  //  Double click event of node 
  window.dblc = function (node) {
    
    // let id = node.getAttribute('id')
    // let nodeType = node.getAttribute('nodeType')
    // console.log('one6666666666666666666666', id, nodeType)
    // handleRun({id, nodeType})
  }

But it was found during the later joint commissioning , This method will execute the current event for each node in the canvas , So when there are multiple nodes , Will repeatedly send multiple requests , Also bind different for the same node multiple times id, Lead to id Disorder

So I looked at the document again , It is found that there is another verification event after the original dragging , You can use asynchronous events , Then the method of creating nodes should be written here ！

Then I print nodes in this event , It is found that we can get nodes id, Then I'll use this directly id Just interact with the backend , There is no need for the back-end to pass it to me , But every time I put this node id Pass to the back end , What else do you need to bind those complicated things ！ It's really complicated to think of simple things , Then I will write the interaction event with the backend creation node new Addon.Dnd Of validateNode In the event

 const dnd = new Addon.Dnd({
    
    target: graph,
    scaled: false,
    animation: true,
    validateNode(droppingNode, options) {
    
      console.log('droppingNode, options=================', droppingNode, options)
      return droppingNode.shape === 'html' ?
        new Promise((resolve, reject) => {
    
           // const {
    
          // draggingNode,
          // draggingGraph
          // } = options
          // const view = draggingGraph.findView(draggingNode)
          // const contentElem = view.findOne('foreignObject > body > div')
          // Dom.addClass(contentElem, 'validating')
          // setTimeout(() => {
    
          // Dom.removeClass(contentElem, 'validating')
          // resolve(true)
          // }, 3000)
		  try {
    
            setLoading(true)
            createWorkflow({
    
              widget_type: type.typeId,
              widget_id: droppingNode.id
            }).then((res) => {
    
              const {
    
                data,
                code,
                msg
              } = res;
              if (code !== 200) {
    
                message.error(` I'm sorry ！${
      msg}`);
                return;
              }
              setLoading(false)
              resolve(true)

            });
          } catch (err) {
    
            message.error(" The current network is not good , Please try again later ！");
            console.error(err);
          }
        })
         :
        true
    },
    // getDropNode(droppingNode, options) { //  This method defines the node returned to the canvas , It came in with us target It's the same 
    // console.log(' At the end of the drag , Get the node placed on the target canvas ',droppingNode, options)

    // }
  })

Generated node style

   const target = graph.createNode({
    
    width: 64,
    height: 92,
    // shape: 'react-shape',
    // component: <MyComponent type={type} />, 
    shape: 'html',
    // // event: 'node:dblclick',
    // <div class="wrap" οndblclick='dblc(${JSON.stringify(type)})'>
    // <div class='wrap ${type.tag}' οndblclick='dblc(this)'>

    html: () => {
    
      const wrap = ` <div class='wrap ${
      type.tag}'> <div class="left"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 62" class="design-iconfont" width="128" height="128"> <path d="M11,470 C34.7512315,470 54.025641,488.792549 54.025641,512 C54.025641,513.104569 53.1302105,514 52.025641,514 C50.9210715,514 50.025641,513.104569 50.025641,512 C50.025641,491.024671 32.5644403,474 11,474 C9.8954305,474 9,473.104569 9,472 C9,470.895431 9.8954305,470 11,470 Z" transform="scale(-1 1) rotate(45 564.97622613 205.94213543)" fill="#9DADB6" fill-rule="nonzero"></path> </svg> </div> <div class="middle"> <div class="shape"> <img class="icon" src=${
      type.icon}></img> </div> <div class="text">${
      type.name}</div> </div> <div class="right"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 62" class="design-iconfont" width="128" height="128"> <path d="M63,470 C86.7512315,470 106.025641,488.792549 106.025641,512 C106.025641,513.104569 105.130211,514 104.025641,514 C102.921072,514 102.025641,513.104569 102.025641,512 C102.025641,491.024671 84.5644403,474 63,474 C61.8954305,474 61,473.104569 61,472 C61,470.895431 61.8954305,470 63,470 Z" transform="rotate(45 599.48904713 163.72435072)" fill="#9DADB6" fill-rule="nonzero"></path> </svg> </div> </div> `
      // wrap.ondblclick = dblc
      return wrap
    },
    ports: ports,
  })

Initialize the drag event

  dnd.start(target, e.nativeEvent)

Then don't bind to the event on the form just now , Write a double-click event to the canvas , Every pass node.id, Or use node.id Interact with the back end ！ No use event Bind to custom nodes ~

graph.on('node:dblclick', ({
      e, x, y, node, view }) => {
    
    console.log('node,===============', node.id)
  })

And then it's done ！