Unable to align nodes from notation model

[YourHarbour]

Hi everyone,

I'm new to glsp and met some questions during the trial.
I've tried replacing the 🖥️ Java ● 🗂️ EMF ● 🖼️ Theia template with my ecore model, and it's able to add nodes to the canvas.
However, the canvas can't remember the node's position. Each time I reopen the page or add a node to the canvas, the node will be placed at 0,0. Shown as below:

Here is my CreateActionCardNodeHandler code, I use the same way as the example task node handler to give it the id:

public class CreateActionCardNodeHandler extends EMFCreateOperationHandler<CreateNodeOperation> {

   @Inject
   protected EMFNotationModelState modelState;

   @Inject
   protected EMFIdGenerator generator;

   public CreateActionCardNodeHandler() {
      super(HealthcareModelTypes.ACTION_CARD);
   }

   @Override
   public Optional<Command> createCommand(final CreateNodeOperation operation) {
      GModelElement container = modelState.getIndex().get(operation.getContainerId()).orElseGet(modelState::getRoot);
      Optional<GPoint> absoluteLocation = operation.getLocation();
      Optional<GPoint> relativeLocation = absoluteLocation
         .map(location -> LayoutUtil.getRelativeLocation(location, container));

      return Optional.of(createActionCardAndShape(relativeLocation));
   }

   @Override
   public String getLabel() { return "Action Card"; }

   protected Command createActionCardAndShape(final Optional<GPoint> relativeLocation) {
      ActionCardList actionCardList = modelState.getSemanticModel(ActionCardList.class).orElseThrow();
      Diagram diagram = modelState.getNotationModel();
      EditingDomain editingDomain = modelState.getEditingDomain();

      ActionCard newActionCard = createActionCard();
      Command actionCardCommand = AddCommand.create(editingDomain, actionCardList,
         HealthcareDSMLPackage.Literals.ACTION_CARD_LIST__ACTION_CARDS, newActionCard);

      Shape shape = createShape(idGenerator.getOrCreateId(newActionCard), relativeLocation);
      Command shapeCommand = AddCommand.create(editingDomain, diagram,
         NotationPackage.Literals.DIAGRAM__ELEMENTS, shape);

      CompoundCommand compoundCommand = new CompoundCommand();
      compoundCommand.append(actionCardCommand);
      compoundCommand.append(shapeCommand);

      return compoundCommand;
   }

   protected ActionCard createActionCard() {
      ActionCard newActionCard = HealthcareDSMLFactory.eINSTANCE.createActionCard();
      newActionCard.setId(UUID.randomUUID().toString());
      setInitialName(newActionCard);
      return newActionCard;
   }

   protected void setInitialName(final ActionCard actionCard) {
      Function<Integer, String> nameProvider = i -> "New" + actionCard.eClass().getName() + i;
      int nodeCounter = modelState.getIndex().getCounter(GraphPackage.Literals.GNODE, nameProvider);
      actionCard.setName(nameProvider.apply(nodeCounter));
   }

   protected Shape createShape(final String elementId, final Optional<GPoint> relativeLocation) {
      Shape newActionCard = NotationFactory.eINSTANCE.createShape();
      newActionCard.setPosition(relativeLocation.orElse(GraphUtil.point(100, 100)));
      newActionCard.setSize(GraphUtil.dimension(80, 50)); // Set appropriate dimensions
      SemanticElementReference reference = NotationFactory.eINSTANCE.createSemanticElementReference();
      reference.setElementId(elementId);
      newActionCard.setSemanticElement(reference);

      return newActionCard;
   }
}

In my example.tasklist file, the node is added successfully with ID:

<?xml version="1.0" encoding="UTF-8"?>
<convertion.healthcare.dsml:ActionCardList xmi:version="2.0" xmlns:xmi="http://www.omg.org/XMI" xmlns:convertion.healthcare.dsml="convertion/healthcare/dsml" id="root" name="Task List">
  <ActionCards id="ba925354-efdf-4772-8898-bd5513321ece" name="NewActionCard0"/>
  <ActionCards id="9ad98fca-d13e-44e3-a6d2-140c4be8c3b4" name="NewActionCard2"/>   <----- here is the new generated id
  <Branches id="95988e17-1c3a-4969-892f-a3231b6e33c2" name="NewBranch0"/>
</convertion.healthcare.dsml:ActionCardList>

However, the notation file didn't contain this id (the first two elements are manually added):

<?xml version="1.0" encoding="ASCII"?>
<notation:Diagram xmi:version="2.0" xmlns:xmi="http://www.omg.org/XMI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:notation="http://www.eclipse.org/glsp/notation">
  <semanticElement elementId="root"/>
  <elements xsi:type="notation:Shape">
    <semanticElement elementId="ba925354-efdf-4772-8898-bd5513321ece"/>
    <position x="113.0" y="120.0"/>
    <size width="50.0" height="50.0"/>
  </elements>
  <elements xsi:type="notation:Shape">
    <semanticElement elementId="95988e17-1c3a-4969-892f-a3231b6e33c2"/>
    <position x="499.0" y="119.0"/>
    <size width="81.0" height="30.0"/>
  </elements>
  <elements xsi:type="notation:Shape">
    <semanticElement/>  <------- here is no elementId like previous
    <position x="188.0" y="30.0"/>
    <size width="80.0" height="50.0"/>
  </elements>
</notation:Diagram>

I'm try to follow the example TaskNodeHandler to create my own nodes handler, but not sure whats going on here. And it seems that's when the first time the GmodelFactory was called to build nodes, the notationModel.getSemanticElement().getResolvedSemanticElement() method returns null.

Could you help me with this?
Thank you!