Simplify hover_text, display_text and link_url interaction (#36)

* Simplify `hover_text`, `display_text` and `link_url` interaction

Closes: #30

* Extract links layer out from hovertext

Author: esensar

src/globe/index.ts

@@ -30,6 +30,7 @@ import { GlobalZoomLayer } from "./layers/globalzoom";
 import { AmbientLightLayer } from "./layers/ambientlight";
 import { OrbitControlsLayer } from "./layers/orbitcontrols";
 import { NewCameraPositionsLayer } from "./layers/newcamerapositions";
+import { LinkDataObjectsLayer } from "./layers/links";
 
 // Configures the registry
 // WARN: All the layers should be added here!
@@ -54,6 +55,7 @@ for (const layer of [
   new ArcsLayer(),
   new CustomObjectLayerGroup(),
   new HoverTextObjectsLayer(),
+  new LinkDataObjectsLayer(),
   new LabeledObjectsLayer(),
   new CirclesLayer(),
   new PointersLayer(),

src/globe/layers/hovertext.ts

@@ -6,23 +6,13 @@ import { registerDialogContainer } from "../../components";
 import { PointData } from "../../data";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { isHoverTextData, HoverTextData } from "../../data/hover";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { isLinkData, LinkData } from "../../data/link";
 import { GlobeLayerAttachHook } from "../layer";
-import { isLabelsData } from "../../data/label";
-import {
-  addClickListener,
-  addMouseEventListener,
-  MouseInteractionLayer,
-} from "./mouseevents";
+import { addMouseEventListener, MouseInteractionLayer } from "./mouseevents";
 
 /**
- * Globe layer for all objects that implement {@link HoverTextData} or {@link LinkData}.
- *
- * If an object also has a label attached, then hover window is opened on click only.
- * If both hover text and link are provided, link is available when clicking on the opened hover window.
+ * Globe layer for all objects that implement {@link HoverTextData}.
  *
- * Implements {@link MouseInteractionLayer} to provide hover and click functionality.
+ * Implements {@link MouseInteractionLayer} to provide hover.
  */
 export class HoverTextObjectsLayer
   implements
@@ -37,8 +27,6 @@ export class HoverTextObjectsLayer
   private hoverWindow: HTMLDivElement | null = null;
   private hoverWindowPosition = new THREE.Vector3();
   private hoverLabelText: HTMLParagraphElement | null = null;
-  private urlToOpen: string | null = null;
-  private openUrlInNewWindow: boolean = true;
 
   attachToGlobe(
     _globe: ThreeGlobe,
@@ -62,19 +50,6 @@ export class HoverTextObjectsLayer
   `;
     this.hoverWindow =
       hoverDialogContainer.querySelector<HTMLDivElement>("#hoverDialog");
-    const dialogArea =
-      hoverDialogContainer.querySelector<HTMLDivElement>("#hoverDialogArea")!;
-    dialogArea.addEventListener("click", (_event: Event) => {
-      if (this.urlToOpen) {
-        window.open(
-          this.urlToOpen,
-          this.openUrlInNewWindow ? "_blank" : "_self",
-        );
-      }
-      if (this.hoverWindow) {
-        this.hoverWindow.hidden = true;
-      }
-    });
     this.hoverLabelText =
       hoverDialogContainer.querySelector<HTMLParagraphElement>(
         "#hoverDialogText",
@@ -83,43 +58,25 @@ export class HoverTextObjectsLayer
 
   buildObject(parent: Object3D, object: PointData): void {
     if (isHoverTextData(object) && object.hover_text) {
-      addMouseEventListener(
-        isLabelsData(object) && object.display_text ? "click" : "hover",
-        parent,
-        () => {
-          this.hadMouseHits = true;
-          if (this.hoverLabelText) {
-            this.hoverLabelText.innerText = object.hover_text ?? "";
-          }
-          if (this.hoverWindow) {
-            parent.getWorldPosition(this.hoverWindowPosition);
-            this.hoverWindow.hidden = false;
-            this.hoverWindowPosition.project(this.cachedCamera!);
-            this.hoverWindowPosition.x =
-              (this.hoverWindowPosition.x * window.innerWidth) / 2 +
-              window.innerWidth / 2;
-            this.hoverWindowPosition.y =
-              -((this.hoverWindowPosition.y * window.innerHeight) / 2) +
-              window.innerHeight / 2;
-            this.hoverWindow.style.top =
-              this.hoverWindowPosition.y.toString() + "px";
-            this.hoverWindow.style.left =
-              this.hoverWindowPosition.x.toString() + "px";
-            if (isLinkData(object) && object.link_url) {
-              this.urlToOpen = object.link_url;
-              this.openUrlInNewWindow =
-                object.new_window == true || object.new_window == null;
-            }
-          }
-        },
-      );
-    } else if (isLinkData(object) && object.link_url) {
-      addClickListener(parent, () => {
-        if (object.link_url) {
-          window.open(
-            object.link_url,
-            object.new_window === false ? "_self" : "_blank",
-          );
+      addMouseEventListener("hover", parent, () => {
+        this.hadMouseHits = true;
+        if (this.hoverLabelText) {
+          this.hoverLabelText.innerText = object.hover_text ?? "";
+        }
+        if (this.hoverWindow) {
+          parent.getWorldPosition(this.hoverWindowPosition);
+          this.hoverWindow.hidden = false;
+          this.hoverWindowPosition.project(this.cachedCamera!);
+          this.hoverWindowPosition.x =
+            (this.hoverWindowPosition.x * window.innerWidth) / 2 +
+            window.innerWidth / 2;
+          this.hoverWindowPosition.y =
+            -((this.hoverWindowPosition.y * window.innerHeight) / 2) +
+            window.innerHeight / 2;
+          this.hoverWindow.style.top =
+            this.hoverWindowPosition.y.toString() + "px";
+          this.hoverWindow.style.left =
+            this.hoverWindowPosition.x.toString() + "px";
         }
       });
     }

src/globe/layers/links.ts

@@ -0,0 +1,26 @@
+import { Object3D } from "three";
+import { CustomObjectLayerBuildHook } from "./customobject";
+import { PointData } from "../../data";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { isLinkData, LinkData } from "../../data/link";
+import { addClickListener } from "./mouseevents";
+
+/**
+ * Globe layer for all objects that implement {@link LinkData}.
+ */
+export class LinkDataObjectsLayer implements CustomObjectLayerBuildHook {
+  readonly layerName: string = "LinkData";
+
+  buildObject(parent: Object3D, object: PointData): void {
+    if (isLinkData(object) && object.link_url) {
+      addClickListener(parent, () => {
+        if (object.link_url) {
+          window.open(
+            object.link_url,
+            object.new_window === false ? "_self" : "_blank",
+          );
+        }
+      });
+    }
+  }
+}