help: drag&drop dynamic|nodes components from sidebar to vFlow draggablezone

[acathon]

Hello,
I just started a new project in Angular 18 and came across a library that inspired me to work on my next side project.
I've built several node components, each with its own main functionality. The main issue I'm facing is how to implement drag-and-drop functionality to move these components from the 'sidebar' (where availableNodes are listed) to a nodes[] array.

Here’s an example of my current setup:

export interface Noodle {
  label: string;
  nodes: Node[];
}

availableNodes: Noodle[] =[
    {
      label: 'Operations',
      nodes: [
        { id: 'sum-op', point: { x: 100, y: 100 }, type: AdditionCustomNodeComponent},
        { id: 'minus-op', type: 'html-template', point: { x: 100, y: 100 }, data: { text: 'Substraction', icon': phosphorMinusDuotone' } },
      ]
    },
]// These are inside the sidebar.

createNode({ event, data }: DndDropEvent | any) {
  // Implementation
  console.log(data);
  const point = this.vflow.documentPointToFlowPoint({
      x: event.x,
      y: event.y
    })
    this.nodes = [...this.nodes, {
      id: `${data.id}`,
      point,
      type: data.type, // <--- console.log shows 'undefined' for sum-op 
      data: {},
    }]
}

nodes: Nodes[] = []; // Target array for dropped components

Has anyone worked on a similar implementation or can suggest the best way to handle this?

[StefanPopa99]

Hi,

I guess you already saw the documentation for drag & drop.

This showcases a simple example of how you can drag & drop items by using the ngx-drag-drop library. The payload of your sidebar menu item as well as the dragging behavior is managed by this external library. Hence, I would advise you to check out the documentation on that library and create a ticket there if the functionality is not working as intended.

However, for this simple example you have 2 steps to follow:

1. Use dndDropzone directive on flow
2. Use dndDraggable directive on your sidebar item passing the item payload.

Example:

@for(node of nodes; track node.id) {
    <div [dndDraggable]="node">{{node.id}}</div>
} 

Adjust accordingly to your usecase.

[acathon]

thank you so much for your response!

I’ve already implemented a solution, but I’m concerned it might not be as clean or well-structured as it could be. However, it does work, and here's what I’ve done:

private NODE_TYPE_MAP = {
  'SUM': AdditionCustomNodeComponent,
  'MINUS': SubstractionCustomNodeComponent,
  //... Other Custom Components
};

availableNodes = [
  {
    label: 'Operations',
    nodes: [
      { id: 'sum-op', type: 'SUM', data: { text: 'Addition', icon: 'phosphorPlusDuotone' }},
      { id: 'minus-op', type: 'MINUS', data: { text: 'Substraction', icon: 'phosphorMinusDuotone' }},
      // ... others
    ]
  },
];

createNode({ event, data }: DndDropEvent | any) {
  console.log(data);
  const point = this.vflow.documentPointToFlowPoint({
    x: event.x,
    y: event.y,
  });

  this.nodes = [
    ...this.nodes,
    {
      id: `${data.id}`,
      point,
      type: this.NODE_TYPE_MAP[data.type], // It was undefined before implementing NODE_TYPE_MAP
      data: {},
    },
  ];
}

nodes: Node[] = [];

I’d love to hear your feedback or suggestions for improving this approach, especially on making it more elegant and maintainable.

Thanks again for your time and assistance—it means a lot!