From c75e9d20d1a3280fa8c54159eb953aae963e992d Mon Sep 17 00:00:00 2001 From: va2ron1 Date: Thu, 17 Mar 2022 11:16:30 -0400 Subject: [PATCH 1/3] minor change for better implementation --- src/definitions.ts | 2 +- src/index.ts | 195 +++++++++++++++++++++++++++- src/interfaces/methods/CreateMap.ts | 2 +- 3 files changed, 191 insertions(+), 8 deletions(-) diff --git a/src/definitions.ts b/src/definitions.ts index 2dbc7d5d..71e75606 100644 --- a/src/definitions.ts +++ b/src/definitions.ts @@ -150,7 +150,7 @@ export interface CapacitorGoogleMapsPlugin { addListener( eventName: "didRequestElementFromPoint", listenerFunc: (result: DidRequestElementFromPointResult) => void - ): PluginListenerHandle; + ): Promise; } export * from "./interfaces"; diff --git a/src/index.ts b/src/index.ts index 2d2e897d..a230ffa6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,17 +1,201 @@ -import { registerPlugin } from "@capacitor/core"; +import { PluginListenerHandle, registerPlugin } from "@capacitor/core"; import { CapacitorGoogleMapsPlugin, + CallbackID, + InitializeOptions, + CreateMapOptions, + CreateMapResult, + UpdateMapOptions, + UpdateMapResult, + RemoveMapOptions, + ClearMapOptions, + MoveCameraOptions, ElementFromPointResultOptions, + AddMarkerOptions, + AddMarkerResult, + RemoveMarkerOptions, + DidTapInfoWindowCallback, + DidCloseInfoWindowCallback, + DidTapMapCallback, + DidLongPressMapCallback, + DidTapMarkerCallback, + DidBeginDraggingMarkerCallback, + DidDragMarkerCallback, + DidEndDraggingMarkerCallback, + DidTapMyLocationButtonCallback, + DidTapMyLocationDotCallback, + DidTapPoiCallback, + DidBeginMovingCameraCallback, + DidMoveCameraCallback, + DidEndMovingCameraCallback, + DefaultEventOptions, + DefaultEventWithPreventDefaultOptions, + DidRequestElementFromPointResult, } from "./definitions"; -const CapacitorGoogleMaps = registerPlugin( +const CapacitorGoogleMapsPluginInstance = registerPlugin( "CapacitorGoogleMaps", { web: () => import("./web").then((m) => new m.CapacitorGoogleMapsWeb()), } ); -CapacitorGoogleMaps.addListener("didRequestElementFromPoint", (data) => { +export class CapacitorGoogleMaps { + private constructor() {} + + public static async initialize(_options: InitializeOptions): Promise { + return CapacitorGoogleMapsPluginInstance.initialize(_options); + } + + public static async addListener(eventName: "didRequestElementFromPoint", listenerFunc: (result: DidRequestElementFromPointResult) => void): Promise { + return CapacitorGoogleMapsPluginInstance.addListener(eventName, listenerFunc); + } + + public static async createMap(element: HTMLElement, _options: CreateMapOptions = {}): Promise { + if (element) { + // get boundaries of element + const boundingRect = element.getBoundingClientRect(); + _options.boundingRect = { + width: Math.round(boundingRect.width), + height: Math.round(boundingRect.height), + x: Math.round(boundingRect.x), + y: Math.round(boundingRect.y), + } + } + return CapacitorGoogleMapsPluginInstance.createMap(_options); + } + + public static async removeMap(_options: RemoveMapOptions): Promise { + return CapacitorGoogleMapsPluginInstance.removeMap(_options); + } + + public static async clearMap(_options: ClearMapOptions): Promise { + return CapacitorGoogleMapsPluginInstance.clearMap(_options); + } + + public static async updateMap(_options: UpdateMapOptions): Promise { + return CapacitorGoogleMapsPluginInstance.updateMap(_options); + } + + public static async moveCamera(_options: MoveCameraOptions): Promise { + return CapacitorGoogleMapsPluginInstance.moveCamera(_options); + } + + public static async addMarker(_options: AddMarkerOptions): Promise { + return CapacitorGoogleMapsPluginInstance.addMarker(_options); + } + + public static async removeMarker(_options: RemoveMarkerOptions): Promise { + return CapacitorGoogleMapsPluginInstance.removeMarker(_options); + } + + public static async didTapInfoWindow( + _options: DefaultEventOptions, + _callback: DidTapInfoWindowCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didTapInfoWindow(_options, _callback); + } + + public static async didCloseInfoWindow( + _options: DefaultEventOptions, + _callback: DidCloseInfoWindowCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didCloseInfoWindow(_options, _callback); + } + + public static async didTapMap( + _options: DefaultEventOptions, + _callback: DidTapMapCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didTapMap(_options, _callback); + } + + public static async didLongPressMap( + _options: DefaultEventOptions, + _callback: DidLongPressMapCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didLongPressMap(_options, _callback); + } + + public static async didTapMarker( + _options: DefaultEventWithPreventDefaultOptions, + _callback: DidTapMarkerCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didTapMarker(_options, _callback); + } + + public static async didBeginDraggingMarker( + _options: DefaultEventOptions, + _callback: DidBeginDraggingMarkerCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didBeginDraggingMarker(_options, _callback); + } + + public static async didDragMarker( + _options: DefaultEventOptions, + _callback: DidDragMarkerCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didDragMarker(_options, _callback); + } + + public static async didEndDraggingMarker( + _options: DefaultEventOptions, + _callback: DidEndDraggingMarkerCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didEndDraggingMarker(_options, _callback); + } + + public static async didTapMyLocationButton( + _options: DefaultEventWithPreventDefaultOptions, + _callback: DidTapMyLocationButtonCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didTapMyLocationButton(_options, _callback); + } + + public static async didTapMyLocationDot( + _options: DefaultEventWithPreventDefaultOptions, + _callback: DidTapMyLocationDotCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didTapMyLocationDot(_options, _callback); + } + + public static async didTapPoi( + _options: DefaultEventOptions, + _callback: DidTapPoiCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didTapPoi(_options, _callback); + } + + public static async didBeginMovingCamera( + _options: DefaultEventOptions, + _callback: DidBeginMovingCameraCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didBeginMovingCamera(_options, _callback); + } + + public static async didMoveCamera( + _options: DefaultEventOptions, + _callback: DidMoveCameraCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didMoveCamera(_options, _callback); + } + + public static async didEndMovingCamera( + _options: DefaultEventOptions, + _callback: DidEndMovingCameraCallback + ): Promise { + return CapacitorGoogleMapsPluginInstance.didEndMovingCamera(_options, _callback); + } + + public static async elementFromPointResult( + _options: ElementFromPointResultOptions + ): Promise { + return CapacitorGoogleMapsPluginInstance.elementFromPointResult(_options); + } +} + + +CapacitorGoogleMapsPluginInstance.addListener("didRequestElementFromPoint", (data) => { const object: ElementFromPointResultOptions = { eventChainId: data?.eventChainId, mapId: null, @@ -33,8 +217,7 @@ CapacitorGoogleMaps.addListener("didRequestElementFromPoint", (data) => { } } - CapacitorGoogleMaps.elementFromPointResult(object); + CapacitorGoogleMapsPluginInstance.elementFromPointResult(object); }); -export * from "./definitions"; -export { CapacitorGoogleMaps }; +export * from "./definitions"; \ No newline at end of file diff --git a/src/interfaces/methods/CreateMap.ts b/src/interfaces/methods/CreateMap.ts index 89194d2d..44bbdc1b 100644 --- a/src/interfaces/methods/CreateMap.ts +++ b/src/interfaces/methods/CreateMap.ts @@ -17,7 +17,7 @@ export interface CreateMapOptions { /** * @since 2.0.0 */ - cameraPosition: CameraPosition; + cameraPosition?: CameraPosition; /** * @since 2.0.0 */ From 9b798327ce82ed1b1f97c6d1b41bc7f66e42108d Mon Sep 17 00:00:00 2001 From: va2ron1 Date: Thu, 17 Mar 2022 13:25:30 -0400 Subject: [PATCH 2/3] update docs to api changes --- docs/api.md | 3 ++- docs/getting-started/quickstart.md | 12 +----------- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/docs/api.md b/docs/api.md index de4174af..58e3f59e 100644 --- a/docs/api.md +++ b/docs/api.md @@ -18,11 +18,12 @@ initialize(options: InitializeOptions) => Promise ### createMap(...) ```typescript -createMap(options: CreateMapOptions) => Promise +createMap(element: HTMLElement, options: CreateMapOptions = {}) => Promise ``` | Param | Type | | ------------- | -------------------------------------------------- | +| **`element`** | [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) | | **`options`** | [CreateMapOptions](#createmapoptions) | **Returns:** Promise<[CreateMapResult](#createmapresult)> diff --git a/docs/getting-started/quickstart.md b/docs/getting-started/quickstart.md index ec79e0cf..d78477bc 100644 --- a/docs/getting-started/quickstart.md +++ b/docs/getting-started/quickstart.md @@ -65,19 +65,9 @@ const initializeMap = async () => { // then get the element you want to attach the Maps instance to: const element = document.getElementById("container"); - // afterwards get its boundaries like so: - const boundingRect = element.getBoundingClientRect(); - // we can now create the map using the boundaries of #container try { - 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), - }, - }); + const result = await CapacitorGoogleMaps.createMap(element); // remove background, so map can be seen // (you can read more about this in the "Setting up the WebView" guide) From 393f0f9557e4e900e66d53f67143ade9d23d56ad Mon Sep 17 00:00:00 2001 From: va2ron1 Date: Thu, 17 Mar 2022 20:40:36 -0400 Subject: [PATCH 3/3] making sure not to overwrite boundingRect options with defaults --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index a230ffa6..cb501a41 100644 --- a/src/index.ts +++ b/src/index.ts @@ -52,7 +52,7 @@ export class CapacitorGoogleMaps { } public static async createMap(element: HTMLElement, _options: CreateMapOptions = {}): Promise { - if (element) { + if (element && !_options.boundingRect) { // get boundaries of element const boundingRect = element.getBoundingClientRect(); _options.boundingRect = {