What values can be provided to "expandCollapseCuePosition" property in cytoscape.js-expand-collapse library?

Question

I'm trying to render this cue Image on the top right corner of the nodes but this property is not taking any values other than "top-left". It does not render anything on providing any other string/function.

The document says it takes in a function but I'm not able to figure out how to use this. I have checked their source code, looked for similar open repos but none to avail.

 expandCollapseCuePosition: 'top-left', // default cue position is top left you can specify a function per node too

Any help is appreciated. Thank You.

After running the below solution provided by sanka:

Answer 1

We can create a function like this.

function setCuePosition(e) {
  const { x1, x2, y1, y2, h, w } = e._private.bodyBounds; // use x1, x2, y1, y2, h, w  for make different positions
  return { x: x2, y: y1 };
}

var api = cy.expandCollapse({
  // other options...
  expandCollapseCuePosition: setCuePosition,
});

EDIT: We have to update the position after expanding a node

cy.nodes().on("expandcollapse.afterexpand", function (e) {
  api.setOption("expandCollapseCuePosition", setCuePosition);
});

The above coordinates are suitable for rectangle-shaped nodes. I created an equation to get the position for circle shapes too.

function setCuePosition(e) {
  const { x1, x2, y1, y2, h, w } = e._private.bodyBounds;

  // if shape is a circle
  if (w === h) {
    return {
      x: x1 + h / 2 + h / (2 * Math.sqrt(2)),
      y: y1 + h / 2 - h / (2 * Math.sqrt(2)),
    };
  }

  // if shape is a rectangle
  const margin = 10;
  return { x: x2 - margin, y: y1 + margin };
}