retejs / rete

JavaScript framework for visual programming
https://retejs.org
MIT License
10.17k stars 653 forks source link

Implement Copy and Paste Functionalities for Nodes in Rete.js #699

Closed kaleem-uet closed 7 months ago

kaleem-uet commented 8 months ago

I am currently working on a project using Rete.js, a JavaScript framework for visual programming. I've encountered a challenge where I need to implement copy and paste functionalities for nodes within the Rete.js canvas. The goal is to allow users to copy a selected node and paste it elsewhere on the canvas, effectively duplicating the node with all its configurations and connections.

Questions: Are there any recommended practices or existing solutions within the Rete.js community for implementing such copy-and-paste functionalities?

Ni55aN commented 7 months ago

there is an example in context menu plugin https://github.com/retejs/context-menu-plugin/blob/main/src/presets/classic/index.ts#L46C19-L46C26

Basically, it uses Clone approach, but for Copy & paste you can implement similar menu (using a context menu preset) with items: Copy: put active node into the state Paste: (for root menu) clone state's node, adds to the editor and translated into area.area.pointer position

terrordrone4 commented 2 months ago

Hey, please, I'm still stucked with this problem. Basically, I saw the rete-context-menu-plugin already support both 'Delete' and 'Clone' option. But for some reason, only the 'Delete' option shown up in my app. The context menu setup only looks like this:

 const contextMenu = new ContextMenuPlugin<Schemes>({
    items: ContextMenuPresets.classic.setup([
      ['A', () => new NodeA()],
      ['B', () => new NodeB()],
      ['Parent', () => new NodeParent()],
    ]),
  });

It does not specify with option to use, yet again only the 'Delete' option shown up How can I show the 'clone' option ? Please!