Browse Source

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

main
Justin Poehnelt 4 years ago committed by GitHub
parent
commit
7b67f9bf04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 42
      src/label.test.ts
  2. 6
      src/label.ts

42
src/label.test.ts

@ -39,7 +39,7 @@ test("should render the divs correctly with string content", () => { @@ -39,7 +39,7 @@ 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>
@ -47,7 +47,7 @@ test("should render the divs correctly with string content", () => { @@ -47,7 +47,7 @@ test("should render the divs correctly with string content", () => {
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,7 +60,7 @@ test("should render the divs correctly with node content", () => { @@ -60,7 +60,7 @@ 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>
@ -68,7 +68,7 @@ test("should render the divs correctly with node content", () => { @@ -68,7 +68,7 @@ test("should render the divs correctly with node content", () => {
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,7 +91,7 @@ test("should render the divs with options", () => { @@ -91,7 +91,7 @@ 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>
@ -99,26 +99,29 @@ test("should render the divs with options", () => { @@ -99,26 +99,29 @@ test("should render the divs with options", () => {
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", () => {
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,
});
[
[false, false, "none"],
[true, false, "block"],
[false, true, "block"],
[true, true, "block"],
].map(([clickable, draggable, display]: [boolean, boolean, string]) => {
label.visible = true;
label.clickable = clickable;
label.draggable = draggable;
label.draw();
@ -126,5 +129,16 @@ test("should render the event div based upon interactivity", () => { @@ -126,5 +129,16 @@ test("should render the event div based upon interactivity", () => {
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");
});

6
src/label.ts

@ -49,6 +49,7 @@ export class Label extends OverlayViewSafe { @@ -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 { @@ -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 { @@ -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;
}

Loading…
Cancel
Save