diff --git a/docs/plugins/virtual-tour.md b/docs/plugins/virtual-tour.md index b296bee4f..09fa5e28a 100644 --- a/docs/plugins/virtual-tour.md +++ b/docs/plugins/virtual-tour.md @@ -361,6 +361,22 @@ The default behaviour is to rotate the view to face the direction of the link an If the [Compass plugin](./compass.md) is enabled, displays the links on the compass. +#### `showLinkTooltip` + +- type: `boolean` +- default: `true` +- updatable: no + +Should a tooltip be displayed on each link. The default tooltip contains `name` + `thumbnail` + `caption`, it is customizable with the [getLinkTooltip](#getlinktooltipcontent-link-node) option. + +#### `getLinkTooltip(content, link, node)` + +- type: `function(string, link, node) => string` +- default: `null` +- updatable: no + +Callback used to replace/modify the tooltip for a link. The first parameter is the default tooltip content. + #### `map` (client mode only) Configuration when using the [Map plugin](./map.md). @@ -434,14 +450,6 @@ Each node can still have a `map` property to override `color`, `image` and `size ::::: -#### `getLinkTooltip(content, link, node)` - -- type: `function(string, link, node) => string` -- default: `null` -- updatable: no - -Callback used to replace/modify the tooltip for a link. The first parameter is the default tooltip content which contains the node `name` + `thumbnail` + `caption`. - #### `arrowStyle` - type: `object` diff --git a/examples/plugin-virtual-tour.html b/examples/plugin-virtual-tour.html index 1471d846a..508a3bf1d 100644 --- a/examples/plugin-virtual-tour.html +++ b/examples/plugin-virtual-tour.html @@ -200,6 +200,7 @@ renderMode: '3d', startNodeId: nodes[1].id, preload: true, + // showLinkTooltip: false, transitionOptions: { // showLoader: false, // speed: '10rpm', diff --git a/packages/virtual-tour-plugin/src/VirtualTourPlugin.ts b/packages/virtual-tour-plugin/src/VirtualTourPlugin.ts index a78159c85..5d85e6a04 100644 --- a/packages/virtual-tour-plugin/src/VirtualTourPlugin.ts +++ b/packages/virtual-tour-plugin/src/VirtualTourPlugin.ts @@ -37,6 +37,7 @@ const getConfig = utils.getConfigParser( rotation: true, }, linksOnCompass: true, + showLinkTooltip: true, getLinkTooltip: null, markerStyle: null, arrowStyle: DEFAULT_ARROW, @@ -266,8 +267,7 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin< throw new PSVError('Cannot set nodes in server side mode'); } - this.state.currentTooltip?.hide(); - this.state.currentTooltip = null; + this.__hideTooltip(); this.state.currentNode = null; (this.datasource as ClientSideDatasource).setNodes(nodes); @@ -358,14 +358,11 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin< if (transitionOptions.showLoader) { this.viewer.loader.show(); } + + this.__hideTooltip(); this.state.currentNode = node; - if (this.state.currentTooltip) { - this.state.currentTooltip.hide(); - this.state.currentTooltip = null; - } - this.arrowsRenderer.clear(); if (this.gallery?.config.hideOnClick) { this.gallery.hide(); @@ -472,6 +469,8 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin< } if (this.state.currentNode?.id === node.id) { + this.__hideTooltip(); + if (newNode.panorama || newNode.panoData || newNode.sphereCorrection) { this.setCurrentNode(node.id, { forceUpdate: true }); return; @@ -608,9 +607,6 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin< if (this.config.getLinkTooltip) { content = this.config.getLinkTooltip(content, link, node); } - if (!content) { - content = node.id; - } return content; } @@ -623,20 +619,26 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin< y: evt.clientY - viewerPos.y, }; - this.state.currentTooltip = this.viewer.createTooltip({ - ...LOADING_TOOLTIP, - left: viewerPoint.x, - top: viewerPoint.y, - box: { - // separate the tooltip from the cursor - width: 20, - height: 20, - }, - }), - - this.__getTooltipContent(link).then((content) => { - this.state.currentTooltip.update(content); - }); + if (this.config.showLinkTooltip) { + this.state.currentTooltip = this.viewer.createTooltip({ + ...LOADING_TOOLTIP, + left: viewerPoint.x, + top: viewerPoint.y, + box: { + // separate the tooltip from the cursor + width: 20, + height: 20, + }, + }), + + this.__getTooltipContent(link).then((content) => { + if (content) { + this.state.currentTooltip.update(content); + } else { + this.__hideTooltip(); + } + }); + } this.map?.setActiveHotspot(LINK_ID + link.nodeId); this.plan?.setActiveHotspot(LINK_ID + link.nodeId); @@ -653,20 +655,15 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin< y: evt.clientY - viewerPos.y, }; - if (this.state.currentTooltip) { - this.state.currentTooltip.move({ - left: viewerPoint.x, - top: viewerPoint.y, - }); - } + this.state.currentTooltip?.move({ + left: viewerPoint.x, + top: viewerPoint.y, + }); } /** @internal */ __onLeaveArrow(link: VirtualTourLink) { - if (this.state.currentTooltip) { - this.state.currentTooltip.hide(); - this.state.currentTooltip = null; - } + this.__hideTooltip(); this.map?.setActiveHotspot(null); this.plan?.setActiveHotspot(null); @@ -674,6 +671,11 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin< this.dispatchEvent(new LeaveArrowEvent(link, this.state.currentNode)); } + private __hideTooltip() { + this.state.currentTooltip?.hide(); + this.state.currentTooltip = null; + } + /** * Manage the preload of the linked panoramas */ diff --git a/packages/virtual-tour-plugin/src/model.ts b/packages/virtual-tour-plugin/src/model.ts index d21c03ed5..4a9a7f4b8 100644 --- a/packages/virtual-tour-plugin/src/model.ts +++ b/packages/virtual-tour-plugin/src/model.ts @@ -229,6 +229,11 @@ export type VirtualTourPluginConfig = { * @default true */ linksOnCompass?: boolean; + /** + * display a tooltip on each link, by default it contains "name" + "thumbnail" + "caption" + * @default true + */ + showLinkTooltip?: boolean; /** * callback to modify the content of the tooltip */