From d54fdfaa9dabf4cca9b89203329fd4e81b3fea22 Mon Sep 17 00:00:00 2001 From: James Milner Date: Sun, 17 Dec 2023 17:49:28 +0000 Subject: [PATCH] fix: ensure cursors are respected properly for the Google Maps API --- src/adapters/google-maps.adapter.spec.ts | 4 ++-- src/adapters/google-maps.adapter.ts | 11 ++++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/adapters/google-maps.adapter.spec.ts b/src/adapters/google-maps.adapter.spec.ts index 27363457..be6640e6 100644 --- a/src/adapters/google-maps.adapter.spec.ts +++ b/src/adapters/google-maps.adapter.spec.ts @@ -497,7 +497,7 @@ describe("TerraDrawGoogleMapsAdapter", () => { const mockQuerySelector = jest.spyOn(document, "querySelector"); mockQuerySelector.mockImplementationOnce( - () => ({ ariaLabel: "Map" }) as Element, + () => ({ classList: { add: jest.fn() } }) as unknown as Element, ); adapter.setCursor("pointer"); @@ -507,7 +507,7 @@ describe("TerraDrawGoogleMapsAdapter", () => { const firstSheetAndRule = document.styleSheets[0] .cssRules[0] as CSSStyleRule; expect( - firstSheetAndRule.selectorText.startsWith(`#${elId}`), + firstSheetAndRule.selectorText.startsWith(`.terra-draw-google-maps`), ).toBeTruthy(); expect( firstSheetAndRule.cssText.includes(`cursor: pointer`), diff --git a/src/adapters/google-maps.adapter.ts b/src/adapters/google-maps.adapter.ts index ad474f2b..75444415 100644 --- a/src/adapters/google-maps.adapter.ts +++ b/src/adapters/google-maps.adapter.ts @@ -212,13 +212,14 @@ export class TerraDrawGoogleMapsAdapter extends TerraDrawBaseAdapter { // TODO: We could cache these individually per cursor const div = this._map.getDiv(); - const mapSelector = `#${div.id} div[aria-label]`; - const map = document.querySelector(mapSelector); + const styleDivSelector = `#${div.id} div[aria-label] .gm-style > div`; + const styleDiv = document.querySelector(styleDivSelector); + + if (styleDiv) { + styleDiv.classList.add("terra-draw-google-maps"); - if (map) { const style = document.createElement("style"); - const selector = `#${div.id} div[aria-label="${map.ariaLabel}"]`; - style.innerHTML = `${selector} { cursor: ${cursor} !important; }`; + style.innerHTML = `.terra-draw-google-maps { cursor: ${cursor} !important; }`; document.getElementsByTagName("head")[0].appendChild(style); this._cursorStyleSheet = style; }