[experiment] Scrolling Support

[va2ron1]

Scrolling Support

I've been experimenting on iOS in order to find a way to support scrolling with maps.

So far this is my research/experiment.

I'm using my latest changes on iOS

In WKWebKit you can set it to use the native UIScrollView instead of the web scroll, that way the maps will scroll with the web view. This is completely true if you are using pure Capacitor without any Framework/UI-Templates that use shadow DOM.

I lost this code, but I anyone need it I can recreate it for references, but there a lot of tutorial for doing this.

As soon you start using a modern framework, this doesn't work. In the frameworks the shadow DOM take control of everything, in these case the scrolling. In general isn't recognized by any browser and the browser believe the scrolling is in the root of page .

Every user/developer use a different frameworks to done there product, in the other experiment, I made a method for the developer to implement in order to send the scrolling data from view/page of the map to the plugin to sync the scrolling.... This works, However the way capacitor handle this data the result is terrible in performance.

I keep the same approach, but I did differently. The browser have script message for two ways communication between the host and the application, Capacitor already is using it to handle the execution of methods of plugins. Because I did a custom web view on iOS, I added the necessary configuration to handle the scrolling data directly and now is working almost perfectly.

This is my result (iOS Simulator):

Demo.Preview.Capacitor.Google.Maps.mp4

Note:

• I disabled scroll view bounces, affects a lot with the minimum lag that have.

Code:
https://github.com/va2ron1/capacitor-googlemaps-native/commits/scrolling-experiment

Example with Ionic Framework:

HTML

<ion-content [forceOverscroll]="false" [scrollEvents]="true" (ionScroll)="onScrollOffset($event)">
    ...
</ion-content>

Code method

public onScrollOffset($event: any): void {
    (window as any).webkit.messageHandlers.scrollOffset.postMessage($event.detail.scrollTop)
}

Example with only Capacitor:

Just need to add an event listener on scroll and on the changes add the following code:

(window as any).webkit.messageHandlers.scrollOffset.postMessage(document.scrollingElement.scrollTop)

Android

I've done the same approach but I can't find the right values to translate the values from DOM to the native view. This code isn't in the branch.

[tafelnl]

Awesome, looks really good. I don't understand the postMessage part completely yet, I think. Could you elaborate on that?

[va2ron1]

Example, using your example.

I run this from the project

const boundingRect = element.getBoundingClientRect();
  const result = await CapacitorGoogleMaps.createMap({
    boundingRect: {
      width: Math.round(boundingRect.width),
      height: Math.round(boundingRect.height),
      x: Math.round(boundingRect.x),
      y: Math.round(boundingRect.y),
    },
  });

You don't use the method directly, Capacitor prepare and send the execution using postMessage this way, in json format:

{
  "type": "message",
  "pluginId": "CapacitorGoogleMaps",
  "methodName": "createMap",
  "options": {
    "boundingRect": {
      "width": 400,
      "height": 600,
      "x": 0,
      "y": 0
    }
  }
}

Because of this, you can't have HTML element or Javascript reference object like your are asking

On iOS this json is parsed as a Dictionary and handle the call using bridge handleJSCall, after a few validation in this method then use CAPPluginCall to perform your JS calling.

This process isn't good in performance in order to have the scrolling synchronized perfectly or almost perfect.

postMessage is called using your MessageHandlers, so I added scrollOffset to handle directly the data with passing through the whole process of capacitor, this way the scrolling is better.

As I see it, to do what you want I think you need to overwrite this and the equivalent of Android to make an exception and parsed the way you want the HTML element before passing the data to the native method or use a custom handler with postMessage like I'm doing here, but even if is fine, isn't look great in syntax.

[va2ron1]

Why I didn't overwrite it for this experiment? There's not easy way. Capacitor need few extra method to allow us to overwrite without making a lot of super classes.