From 2800c2c09a78e1d1cd4529f2cce277a3d7a8a3c4 Mon Sep 17 00:00:00 2001 From: mistic100 Date: Thu, 20 Jan 2022 18:29:30 +0100 Subject: [PATCH] Fix #622 virtual tour: add data to "node-changed" event --- docs/plugins/plugin-virtual-tour.md | 7 ++-- src/plugins/virtual-tour/index.js | 48 ++++++++++++++++++--------- types/plugins/virtual-tour/index.d.ts | 17 +++++++--- 3 files changed, 50 insertions(+), 22 deletions(-) diff --git a/docs/plugins/plugin-virtual-tour.md b/docs/plugins/plugin-virtual-tour.md index 915286b8b..ab17bc3c1 100644 --- a/docs/plugins/plugin-virtual-tour.md +++ b/docs/plugins/plugin-virtual-tour.md @@ -318,12 +318,15 @@ Changes the current node. ## Events -#### `node-changed(nodeId)` +#### `node-changed(nodeId, data)` Triggered when the current node is changed. ```js -virtualTourPlugin.on('node-changed', (e, nodeId) => { +virtualTourPlugin.on('node-changed', (e, nodeId, data) => { console.log(`Current node is ${nodeId}`); + if (data.fromNode) { // other data are available + console.log(`Previous node was ${data.fromNode.id}`); + } }); ``` diff --git a/src/plugins/virtual-tour/index.js b/src/plugins/virtual-tour/index.js index a63dfe274..aa6e8ecec 100644 --- a/src/plugins/virtual-tour/index.js +++ b/src/plugins/virtual-tour/index.js @@ -99,6 +99,13 @@ import { bearing, distance, setMeshColor } from './utils'; * @property {'top'|'bottom'} [arrowPosition='bottom'] - (3D mode) arrows vertical position */ +/** + * @typedef {Object} PSV.plugins.VirtualTourPlugin.NodeChangedData + * @summary Data associated to the "node-changed" event + * @type {PSV.plugins.VirtualTourPlugin.Node} [fromNode] - The previous node + * @type {PSV.plugins.VirtualTourPlugin.NodeLink} [fromLink] - The link that was clicked in the previous node + * @type {PSV.Position} [fromLinkPosition] - The position of the link on the previous node + */ // add markers buttons DEFAULTS.lang[NodesListButton.id] = 'Locations'; @@ -160,15 +167,15 @@ export class VirtualTourPlugin extends AbstractPlugin { linksOnCompass : options?.renderMode === MODE_MARKERS, listButton : options?.dataMode !== MODE_SERVER, ...options, - markerStyle: { + markerStyle : { ...DEFAULT_MARKER, ...options?.markerStyle, }, - arrowStyle : { + arrowStyle : { ...DEFAULT_ARROW, ...options?.arrowStyle, }, - nodes : null, + nodes : null, }; /** @@ -260,12 +267,12 @@ export class VirtualTourPlugin extends AbstractPlugin { } handleEvent(e) { - let nodeId; + let link; switch (e.type) { case 'select-marker': - nodeId = e.args[0].data?.[LINK_DATA]?.nodeId; - if (nodeId) { - this.setCurrentNode(nodeId); + link = e.args[0].data?.[LINK_DATA]; + if (link) { + this.setCurrentNode(link.nodeId, link); } break; @@ -277,14 +284,14 @@ export class VirtualTourPlugin extends AbstractPlugin { break; case CONSTANTS.EVENTS.CLICK: - nodeId = this.prop.currentArrow?.userData?.[LINK_DATA]?.nodeId; - if (!nodeId) { + link = this.prop.currentArrow?.userData?.[LINK_DATA]; + if (!link) { // on touch screens "currentArrow" may be null (no hover state) const arrow = this.psv.dataHelper.getIntersection({ x: e.args[0].viewerX, y: e.args[0].viewerY }, LINK_DATA)?.object; - nodeId = arrow?.userData?.[LINK_DATA]?.nodeId; + link = arrow?.userData?.[LINK_DATA]; } - if (nodeId) { - this.setCurrentNode(nodeId); + if (link) { + this.setCurrentNode(link.nodeId, link); } break; @@ -347,9 +354,10 @@ export class VirtualTourPlugin extends AbstractPlugin { /** * @summary Changes the current node * @param {string} nodeId + * @param {PSV.plugins.VirtualTourPlugin.NodeLink} [fromLink] * @returns {Promise} resolves false if the loading was aborted by another call */ - setCurrentNode(nodeId) { + setCurrentNode(nodeId, fromLink = null) { if (nodeId === this.prop.currentNode?.id) { return Promise.resolve(true); } @@ -359,6 +367,9 @@ export class VirtualTourPlugin extends AbstractPlugin { this.prop.loadingNode = nodeId; + const fromNode = this.prop.currentNode; + const fromLinkPosition = fromNode && fromLink ? this.__getLinkPosition(fromNode, fromLink) : null; + // if this node is already preloading, wait for it return Promise.resolve(this.preload[nodeId]) .then(() => { @@ -429,8 +440,13 @@ export class VirtualTourPlugin extends AbstractPlugin { * @memberof PSV.plugins.VirtualTourPlugin * @summary Triggered when the current node is changed * @param {string} nodeId + * @param {PSV.plugins.VirtualTourPlugin.NodeChangedData} data */ - this.trigger(EVENTS.NODE_CHANGED, nodeId); + this.trigger(EVENTS.NODE_CHANGED, nodeId, { + fromNode, + fromLink, + fromLinkPosition, + }); this.prop.loadingNode = null; @@ -475,11 +491,11 @@ export class VirtualTourPlugin extends AbstractPlugin { setMeshColor(mesh, link.arrowStyle?.color || this.config.arrowStyle.color); - mesh.userData = { [LINK_DATA]: link, longitude : position.longitude }; + mesh.userData = { [LINK_DATA]: link, longitude: position.longitude }; mesh.rotation.order = 'YXZ'; mesh.rotateY(-position.longitude); this.psv.dataHelper - .sphericalCoordsToVector3({ longitude: position.longitude, latitude : 0 }, mesh.position) + .sphericalCoordsToVector3({ longitude: position.longitude, latitude: 0 }, mesh.position) .multiplyScalar(1 / CONSTANTS.SPHERE_RADIUS); this.arrowsGroup.add(mesh); diff --git a/types/plugins/virtual-tour/index.d.ts b/types/plugins/virtual-tour/index.d.ts index cd2ecf36b..7ddab6efc 100644 --- a/types/plugins/virtual-tour/index.d.ts +++ b/types/plugins/virtual-tour/index.d.ts @@ -1,5 +1,5 @@ import { Event } from 'uevent'; -import { AbstractPlugin, Viewer, ViewerOptions } from '../..'; +import { AbstractPlugin, Position, Viewer, ViewerOptions } from '../..'; import { Marker, MarkerProperties } from '../markers'; /** @@ -38,6 +38,15 @@ export type VirtualTourArrowStyle = { scale?: [number, number]; }; +/** + * @summary Data associated to the "node-changed" event + */ +export type VirtualTourNodeChangedData = { + fromNode?: VirtualTourNode, + fromLink?: VirtualTourNodeLink, + fromLinkPosition?: Position, +}; + export type VirtualTourPluginPluginOptions = { dataMode?: 'client' | 'server'; positionMode?: 'manual' | 'gps'; @@ -51,7 +60,7 @@ export type VirtualTourPluginPluginOptions = { arrowStyle?: VirtualTourArrowStyle; markerLatOffset?: number; arrowPosition?: 'top' | 'bottom'; -} +}; export const EVENTS: { NODE_CHANGED: 'node-changed', @@ -94,11 +103,11 @@ export class VirtualTourPlugin extends AbstractPlugin { /** * @summary Triggered when the current node changes */ - on(e: 'node-changed', cb: (e: Event, node: Node) => void): this; + on(e: 'node-changed', cb: (e: Event, nodeId: VirtualTourNode['id'], data: VirtualTourNodeChangedData) => void): this; /** * @summary Used to alter the list of nodes displayed on the side-panel */ - on(e: 'render-nodes-list', cb: (e: Event, nodes: Node[]) => Node[]): this; + on(e: 'render-nodes-list', cb: (e: Event, nodes: VirtualTourNode[]) => VirtualTourNode[]): this; }