Is there a way to copy and paste the node in drawflow library to canvas?

[Aravinda93]

@jerosoler I am using the Drawflow library in my project and creating various types of nodes in my Drawflow canvas. Everything works fine so far.

I would like to copy and paste the existing node from Canvas is there any default way to achieve this? Or maybe some custom function which can be used to copy and paste existing nodes?

I tried to copy and paste directly but does not seem to work as of now.

[jerosoler]

Hello

There is nothing by default.

To copy a node you can get the node information with "getNodeFromId".

To copy and paste. You can use a variable or the clipboard: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

[Aravinda93]

@jerosoler

Thanks a lot for the response. I was able to make it work and implement copy and paste using the provided approach.

I used the following trick within my Nuxt/Vue-based application:

mounted () {
    document.addEventListener('copy', this.handleCopy)
    document.addEventListener('paste', this.handlePaste)
    document.addEventListener('mousemove', this.mousemove)
    }

And within this I tried to copy the node information and upon pasting I just created the node:

I can obtain the information of the selected node from here:

    // If the node is selected then get the respective node info
    this.$df.on('nodeSelected', function (nodeId) {
      const selectedNodeInfo = vm.$df.getNodeFromId(nodeId)
      vm.copiedNode = selectedNodeInfo
    })

 // Listen for the copy event to copy  the node
    handleCopy (e) {
      if (this.copiedNode) {
        e.clipboardData.setData('text/plain', JSON.stringify(this.copiedNode))
        e.preventDefault()
      }
    },

// Listen for the paste event to paste the node
    handlePaste (e) {
      // Get the node information based on pasted data
      const pastedData = JSON.parse(e.clipboardData.getData('text/plain'))

      if (this.copiedNode) {

          this.dragEventType = pastedData.data.eventType
          this.addNodeToDrawFlow(pastedData.name, this.mouseX, this.mouseY)

        }
        e.preventDefault()

    },

In this way we can somehow able to achieve. Provided code sample so it can help someone else in the future.