User Story

As an app developer, I want to mount ZK components to specific positions relative to a spreadsheet range so that I can create more interactive and dynamic spreadsheet applications.

 The actor is the app developer using Keikai.
 The action is to mount ZK components to specific range.
 The achievement is to create more interactive and dynamic spreadsheet applications.

Acceptance Criteria

1. Provide an API to mount ZK components to a specific range or cell.
2. Allow specifying the position of the mounted component relative to the range (e.g., start_top, end_bottom, center).
3. Enable setting the size of the mounted component, including percentage-based sizes for auto-adjustment.
4.  Implement automatic position adjustment of mounted components when scrolling to keep them in viewport.
5. Provide the ability to add event listeners (e.g., hover, click) to the mounted components.
6. Return an instance of the mounted component for further manipulation.

Details

Example API usage:

var comp = new ListBox();
range.mount(comp, position, size);
comp.addEventListener("onClick", (event) -> {
    // event.getRange();
    // event.getPosition(); (e.g., 'start_top')
    // event.getSize();
});

comp.addEventListener("onMouseOver", (event) -> {
   comp.setVisible(true);
   comp.setStyle("color: red");
});
 
comp.addEventListener("onMouseOut", (event) -> {
   comp.setVisible(false);
   comp.setStyle("");
}); 

The API should support following parameters:

• Range: The cell or range where the component will be mounted.
• Position: Similar to ZK popup positions (e.g., start_top, end_bottom, center)
• Size: Ability to specify the mounted element's size (e.g., w: 100%, h: 100%) for auto-adjustment when the range's dimensions change.
• Comp: The ZK component which needs to be mounted.