Grid Base Library

This is a Javascript library that provides common grid functions for multiple frameworks.

Usage notes

To add the grid resize button

• Initialize grid resizer.
  • Create a gridResizer object.

    gridResizer = resizeServiceBase.createGridResizer(
        componentEl,
        viewportUpdateUrl,
        gridPrefix
    )

  • Set initial data for the gridResizer object.

    gridResizer.updateData({
        gridConfig,
        componentPath: componentPath
    });
      

  • Trigger the gridResizer, it will start to observe and insert resize buttons.

    gridResizer.init();

  • Should stop watching after resize buttons are added.

    setTimeout(() => {
        gridResizer?.disconnectObserver();
    }, 10000)

• Listen for viewport changes and update the current viewport value.

  gridResizer.updateData({currentViewport})

• Set viewport list value after the fetching viewports API finishes because we might not have viewport data when initializing the gridResizer.

  gridResizer.setViewports(viewports);

To add the new line icon

• Initialize area observer.
  • Create an areaObserver object.

    areaObserver = areaServiceBase.createAreaObserver(
        areaElement,
        gridPrefix
    );

  • Trigger the areaObserver.

    areaObserver.init();

• Should stop watching after new line icons are added.

  setTimeout(() => {
      areaObserver?.disconnectObserver();
  }, 10000)

Local development

Install dependencies

npm install

Build the project

npm run build

Run test

npm run test