Fixed group initialPosition

initially,
image
then
image

how to make the top left corner of the group to make fixed, it can be expand to right or bottom sides

What happened between the screenshots?
What did the user do, and what did your code do?

Your Group template has a Placeholder, doesn’t it?
What is its Group.layout?
What is the Diagram.layout?

validate activity has moved to right and throw moved little down
but I want to make the placeholder’s topleft corner remains same

The user moved those nodes?

group layout is Spot but inside group there is an auto layout

yes …
validate activity has moved to right and throw moved little down

??? What are the Layouts?

A Placeholder is supposed to be where its members are. The user moved two nodes to the right and down, so that’s why the Group moved right and down and became smaller.

Maybe you don’t want to use a Placeholder?

no I want to use placeholder, but with fixed initial position

So as the user tries to drag the leftmost member node toward the right, what should happen? Should it stay fixed and the other members shift leftward? That would be frustrating to the user.

If you expect the group’s left side to stay where it is and a gap to expand between it and where its members are, then you do not want a Placeholder.

image

image

see here, now custom moved to right, you can see that the top and left sides of group is spacious, it does not comes smaller, I want like this

You can get that behavior by not using a Placeholder in your Group.
https://gojs.net/latest/intro/sizedGroups.html

you can see here
image

the gamma node moved out to the group visually
I know its still in group programatically
so it is no use I guess

You can customize the DraggingTool to keep member nodes within their groups by setting Part | GoJS API

Example: Swim Lanes
Look at the stayInGroup function.

  • I want to restrict only two sides (top and left)

  • I wont set fixed height or width

  • it have to dynamically expand to bottom and right sides

Try setting Group | GoJS API to true

I don’t see any visual changes, what is the use

That is in conjunction with using a Placeholder, as you deemed necessary.

Alternatively, don’t use a Placeholder but do all of your own calculations for the position and size of the Group. This is done, for example, in the Shared States sample: Shared States

computesBoundsIncludingLocation: true,

it works a little bit but while moving to other nodes it get again back to previous position

I cannot tell what that clip is showing.

If you cannot use Groups with Placeholders, use them without and do your own management of their boundaries. It’s more work to do something custom, but you can get the behavior you want.

you can see there, initially it is correct and then I’m hovering on start it gets smaller again, with placeholder it is possible, in plain HTML it works well but in react it behave like this