How to append multiple nodes

Developers
1

Hi,
I want to append a set of nodes when I click this icon:
image

And the effect just like this
image

I want to use autoPlace.append,but it seem like just use single element
I can drag a set of nodes by left pad,because create.start can use element array

      const elements = [
        gateway,
        userTask_1,
        userTask_2,
        userTask_1_connection,
        userTask_2_connection,
        regressionGateway,
        regressionGateway_1_connection,
        regressionGateway_2_connection,
      ];
      create.start(e, elements);

how to append multiple nodes?

2

The create feature supports multiple elements. You can see this in action when creating a sub-process

image
image1920×1007 32.7 KB

and when using copy and paste

image
image1920×1007 45.3 KB

However, the auto-place feature only supports one element at a time so. You’d have to either change the auto-place feature or implement your own.

3

Is there any demo about how to complete multiple auto-place or multiple preview？

4

To append multiple nodes in JavaScript (commonly used in DOM manipulation), you can use the appendChild or append method. Here’s a general approach:

1. Using appendChild in a Loop

If you want to append multiple nodes one after the other, you can loop through an array of nodes and append each one using appendChild.

// Create a parent element
const parentElement = document.getElementById(“parentElement”);

// Create an array of new nodes to append
const nodes = [document.createElement(“div”), document.createElement(“span”), document.createElement(“p”)];

// Append each node to the parent
nodes.forEach(node => {
parentElement.appendChild(node);
});

2. Using append to Append Multiple Nodes at Once

The append method allows you to append multiple nodes (or text) in a single call. This is more efficient if you’re appending multiple nodes at once.

// Create a parent element
const parentElement = document.getElementById(“parentElement”);

// Create new nodes
const node1 = document.createElement(“div”);
const node2 = document.createElement(“span”);
const node3 = document.createElement(“p”);

// Append all nodes in a single call
parentElement.append(node1, node2, node3);

Key Differences:

  • appendChild: Can only append one node at a time.
  • append: Can append multiple nodes or a combination of nodes and text at once.

Both approaches work well depending on your use case, but if you have multiple nodes to append at once, append is generally preferred.

5

??
That’s not the answer I wanted.

6

Hi @qian357891,

a long time ago I’ve created this example: GitHub - ingorichtsmeier/camunda-modeler-plugin-connected-elements: Example of a modeller plugin to add some connected elements by dragging them as a single symbol from the palette.

I don’t know if it works on the latest version of bpmn-js. But it may be worth to give it a try.

Hope this helps, Ingo

7

thanks @Ingo_Richtsmeier，
In fact, I use the logic of dragging and dropping after clicking and automatically releasing the mouse to simulate this operation now.
But the current solution is not what I want

I want to click node’s panel icon to append a multiple nodes.
just like this:
image