Fix #1157 virtual-tour: add enter-arrow/leave-arrow events

Author: mistic100

docs/plugins/virtual-tour.md

@@ -605,9 +605,13 @@ Changes the nodes and display the first one (or the one designated by `startNode
 
 Changes the current node. `options` allows to override the default `transitionOptions`.
 
+#### `getCurrentNode()`
+
+Returns the current node.
+
 ## Events
 
-#### `node-changed(nodeId, data)`
+#### `node-changed(node, data)`
 
 Triggered when the current node is changed.
 
@@ -620,3 +624,9 @@ virtualTourPlugin.addEventListener('node-changed', ({ node, data }) => {
     }
 });
 ```
+
+#### `enter-arrow(link, node)` | `leave-arrow(link, node)` (3d mode only)
+
+Triggered when the user puts the cursor hover or away an arrow.
+
+_In markers mode, listen to `enter-markers`/`leave-marker` on the markers plugin (link markers have an additional `tourLink` data)._ 

examples/plugin-virtual-tour.html

@@ -229,6 +229,27 @@
             });
 
             const virtualTour = viewer.getPlugin(VirtualTourPlugin);
+            const markers = viewer.getPlugin(MarkersPlugin);
+
+            virtualTour.addEventListener('enter-arrow', ({ link }) => {
+                console.log(`enter link ${link.nodeId}`);
+            });
+
+            virtualTour.addEventListener('leave-arrow', ({ link }) => {
+                console.log(`leave link ${link.nodeId}`);
+            });
+
+            markers.addEventListener('enter-marker', ({ marker }) => {
+                if (marker.data?.tourLink) {
+                    console.log(`enter link ${marker.data.tourLink.nodeId}`);
+                }
+            });
+
+            markers.addEventListener('leave-marker', ({ marker }) => {
+                if (marker.data?.tourLink) {
+                    console.log(`leave link ${marker.data.tourLink.nodeId}`);
+                }
+            });
 
             window.viewer = viewer;
         </script>

packages/shared/typings.d.ts

@@ -18,4 +18,5 @@ declare module '*.glsl' {
     export default content;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const PKG_VERSION: string;

packages/virtual-tour-plugin/src/VirtualTourPlugin.ts

@@ -10,7 +10,7 @@ import { DEFAULT_ARROW, DEFAULT_MARKER, LINK_DATA, LINK_ID } from './constants';
 import { AbstractDatasource } from './datasources/AbstractDataSource';
 import { ClientSideDatasource } from './datasources/ClientSideDatasource';
 import { ServerSideDatasource } from './datasources/ServerSideDatasource';
-import { NodeChangedEvent, VirtualTourEvents } from './events';
+import { EnterArrowEvent, LeaveArrowEvent, NodeChangedEvent, VirtualTourEvents } from './events';
 import {
     GpsPosition,
     VirtualTourLink,
@@ -306,6 +306,13 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin<
         }
     }
 
+    /**
+     * Returns the current node
+     */
+    getCurrentNode(): VirtualTourNode {
+        return this.state.currentNode;
+    }
+
     /**
      * Sets the nodes (client mode only)
      * @throws {@link PSVError} if not in client mode
@@ -648,6 +655,8 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin<
 
         this.viewer.needsUpdate();
         this.viewer.setCursor('pointer');
+
+        this.dispatchEvent(new EnterArrowEvent(link, this.state.currentNode))
     }
 
     private __onHoverObject(viewerPoint: Point) {
@@ -673,6 +682,8 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin<
 
         this.viewer.needsUpdate();
         this.viewer.setCursor(null);
+
+        this.dispatchEvent(new LeaveArrowEvent(link, this.state.currentNode))
     }
 
     /**

packages/virtual-tour-plugin/src/events.ts

@@ -21,4 +21,37 @@ export class NodeChangedEvent extends TypedEvent<VirtualTourPlugin> {
     }
 }
 
-export type VirtualTourEvents = NodeChangedEvent;
+/**
+ * @event Triggered when the user puts the cursor hover a marker
+ */
+export class EnterArrowEvent extends TypedEvent<VirtualTourPlugin> {
+    static override readonly type = 'enter-arrow';
+    override type: 'enter-arrow';
+
+    constructor(
+        public readonly link: VirtualTourLink,
+        public readonly node: VirtualTourNode
+    ) {
+        super(EnterArrowEvent.type);
+    }
+}
+
+/**
+ * @event Triggered when the user puts the cursor away from an arrow
+ */
+export class LeaveArrowEvent extends TypedEvent<VirtualTourPlugin> {
+    static override readonly type = 'leave-arrow';
+    override type: 'leave-arrow';
+
+    constructor(
+        public readonly link: VirtualTourLink,
+        public readonly node: VirtualTourNode
+    ) {
+        super(LeaveArrowEvent.type);
+    }
+}
+
+export type VirtualTourEvents = 
+    | NodeChangedEvent
+    | EnterArrowEvent
+    | LeaveArrowEvent;