How to get a Sub-process to show other nodes along with start node on dragging and dropping it to canvas?

[deepika.v]

I need to add a custom node in the palette. This node is a variation of sub process. I could do this.
Now when this node is dragged and dropped, I need to be able to show a flow within. All we get is a start node when we drag a sub process to canvas. I would like to add more nodes there. I could add the nodes, but adding a sequence is a little difficult. I am unable to find the waypoints for the sequence.
Is there a way to figure out the waypoints for a sequence that connects nodes?

[nikku]

Create allows you to create a set of elements. I suggest you to to that. One example:

const create = bpmnJS.get('create');
const elementFactory = bpmnJS.get('elementFactory');

const gateway = elementFactory.createShape({
  type: "bpmn:Task",
  x: 0,
  y: 0
});

const event = elementFactory.createShape({
  type: "bpmn:IntermediateCatchEvent",
  eventDefinitionType: "bpmn:MessageEventDefinition",
  x: 120,
  y: 120
});

const waypoints = [
  { x: gateway.x, y: gateway.y },
  { x: event.x, y: event.y }
];

const connection = elementFactory.createConnection({
  type: "bpmn:SequenceFlow",
  source: gateway,
  target: event,
  waypoints
});
const elements = [gateway, event, connection];
create.start(e, elements);

[deepika.v]

Thank you. I will try this.