fix: do not show event div when marker not visible (#26)

googlemaps · Oct 26, 2020 · 7b67f9b · 7b67f9b
1 parent 48535e2
commit 7b67f9b
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 20 deletions.
diff --git a/src/label.test.ts b/src/label.test.ts
@@ -39,15 +39,15 @@ test("should render the divs correctly with string content", () => {
   expect(label["labelDiv"]).toMatchInlineSnapshot(`
     <div
       class="label marker-label"
-      style="position: absolute; opacity: 1; left: 1px; top: 3px; z-index: 4;"
+      style="position: absolute; opacity: 1; display: block; left: 1px; top: 3px; z-index: 4;"
     >
       foo
     </div>
   `);
   expect(label["eventDiv"]).toMatchInlineSnapshot(`
     <div
       class="label marker-label-event"
-      style="position: absolute; opacity: 0.01; cursor: pointer; left: 1px; top: 3px; z-index: 4; display: block;"
+      style="position: absolute; opacity: 0.01; cursor: pointer; display: block; left: 1px; top: 3px; z-index: 4;"
     >
       foo
     </div>
@@ -60,15 +60,15 @@ test("should render the divs correctly with node content", () => {
   expect(label["labelDiv"]).toMatchInlineSnapshot(`
     <div
       class="marker-label"
-      style="position: absolute; opacity: 1; left: 1px; top: 3px; z-index: 4;"
+      style="position: absolute; opacity: 1; display: block; left: 1px; top: 3px; z-index: 4;"
     >
       <img />
     </div>
   `);
   expect(label["eventDiv"]).toMatchInlineSnapshot(`
     <div
       class="marker-label marker-label-event"
-      style="position: absolute; opacity: 0.01; cursor: pointer; left: 1px; top: 3px; z-index: 4; display: block;"
+      style="position: absolute; opacity: 0.01; cursor: pointer; display: block; left: 1px; top: 3px; z-index: 4;"
     >
       <img />
     </div>
@@ -91,40 +91,54 @@ test("should render the divs with options", () => {
   expect(label["labelDiv"]).toMatchInlineSnapshot(`
     <div
       class="label marker-label"
-      style="position: absolute; opacity: 0.5; left: 1px; top: 3px; z-index: 1010;"
+      style="position: absolute; opacity: 0.5; display: block; left: 1px; top: 3px; z-index: 1010;"
     >
       foo
     </div>
   `);
   expect(label["eventDiv"]).toMatchInlineSnapshot(`
     <div
       class="label marker-label-event"
-      style="position: absolute; opacity: 0.01; left: 1px; top: 3px; z-index: 1010; display: none; cursor: inherit;"
+      style="position: absolute; opacity: 0.01; display: none; left: 1px; top: 3px; z-index: 1010; cursor: inherit;"
     >
       foo
     </div>
   `);
 });
 
-test("should render the event div based upon interactivity", () => {
-  const label = new Label({
-    labelContent: "foo",
-    draggable: false,
-    clickable: false,
-  });
+test.each([
+  [false, false, "none"],
+  [true, false, "block"],
+  [false, true, "block"],
+  [true, true, "block"],
+])(
+  "should render the event div based upon interactivity %s %s %s",
+  (clickable, draggable, display) => {
+    const label = new Label({
+      labelContent: "foo",
+      draggable: false,
+      clickable: false,
+    });
+
+    label.visible = true;
 
-  [
-    [false, false, "none"],
-    [true, false, "block"],
-    [false, true, "block"],
-    [true, true, "block"],
-  ].map(([clickable, draggable, display]: [boolean, boolean, string]) => {
     label.clickable = clickable;
     label.draggable = draggable;
     label.draw();
     expect(label["eventDiv"].style.display).toBe(display);
     expect(label["eventDiv"].style.cursor).toBe(
       display === "block" ? "pointer" : "inherit"
     );
-  });
+  }
+);
+
+test("should not display event div if marker is not visible", () => {
+  const label = new Label({ labelContent: "foo" });
+
+  label.clickable = true;
+  label.draggable = true;
+  label.visible = false;
+
+  label.draw();
+  expect(label["eventDiv"].style.display).toBe("none");
 });
diff --git a/src/label.ts b/src/label.ts
@@ -49,6 +49,7 @@ export class Label extends OverlayViewSafe {
     opacity = 1,
     map,
     labelZIndexOffset = 1,
+    visible = true,
     zIndex = 0,
   }: LabelOptions) {
     super();
@@ -69,6 +70,7 @@ export class Label extends OverlayViewSafe {
     }
 
     this.opacity = opacity;
+    this.visible = visible;
     this.zIndex = zIndex;
     this.zIndexOffset = labelZIndexOffset;
 
@@ -152,7 +154,9 @@ export class Label extends OverlayViewSafe {
     this.eventDiv.style.zIndex = String(zIndex);
 
     // If not interactive set display none on event div
-    this.eventDiv.style.display = this.isInteractive ? BLOCK : NONE;
+    this.eventDiv.style.display = this.isInteractive
+      ? this.eventDiv.style.display
+      : NONE;
     this.eventDiv.style.cursor = this.cursor;
   }