Always Display all Infospot HoverElements

[codetweek]

I was wondering if there is a way to display all infospot hoverelements by default. Basically lock all of them at the same time, all the time. That would mean only the infospot hover animation will show when hovering. The hoverElement/hoverText is always visible for all infospots.

[shadow81627]

I've got a workaround to get infospot labels to always show.

To get the tooltip to initially show without hover, I run this code after adding the infospot label.

infoSpot.element.style.display = 'block';
infoSpot.element._width = _infoSpot.element.clientWidth;
infoSpot.element._height = _infoSpot.element.clientHeight;
const { x, y } = viewer.getScreenVector(
    infoSpot.getWorldPosition(new THREE.Vector3()),
);
infoSpot.translateElement(x, y);
infoSpot.lockHoverElement();

I also add an event listener to prevent the label being removed by the dismiss event.

infoSpot.addEventListener('dismiss', function () {
            infoSpot.element.style.display = 'block';
            infoSpot.lockHoverElement();
    });

Then the harder part is to stop the infospot label getting dismissed when it's off-screen, I run the following code.

cosnt infoSpot = []; // list of your infospots
const updatedCallback = function () {
        for (const infoSpot of infoSpots) {
                if (infoSpot?.element?.style) {
                    infoSpot.element.style.display = 'block';
                    infoSpot.lockHoverElement();
                }
        }
    }
    viewer.addUpdateCallback(updatedCallback);

You can see on the panorama the event dispatch to dismiss infospot https://pchen66.github.io/panolens.js/docs/panorama_Panorama.js.html#line186

You can see on the viewer code the call to dismiss infospot https://pchen66.github.io/panolens.js/docs/viewer_Viewer.js.html#line1903

[bllxk]

I've got a workaround to get infospot labels to always show.

To get the tooltip to initially show without hover, I run this code after adding the infospot label.

infoSpot.element.style.display = 'block';
infoSpot.element._width = _infoSpot.element.clientWidth;
infoSpot.element._height = _infoSpot.element.clientHeight;
const { x, y } = viewer.getScreenVector(
    infoSpot.getWorldPosition(new THREE.Vector3()),
);
infoSpot.translateElement(x, y);
infoSpot.lockHoverElement();

I also add an event listener to prevent the label being removed by the dismiss event.

infoSpot.addEventListener('dismiss', function () {
            infoSpot.element.style.display = 'block';
            infoSpot.lockHoverElement();
    });

Then the harder part is to stop the infospot label getting dismissed when it's off-screen, I run the following code.

cosnt infoSpot = []; // list of your infospots
const updatedCallback = function () {
        for (const infoSpot of infoSpots) {
                if (infoSpot?.element?.style) {
                    infoSpot.element.style.display = 'block';
                    infoSpot.lockHoverElement();
                }
        }
    }
    viewer.addUpdateCallback(updatedCallback);

You can see on the panorama the event dispatch to dismiss infospot https://pchen66.github.io/panolens.js/docs/panorama_Panorama.js.html#line186

You can see on the viewer code the call to dismiss infospot https://pchen66.github.io/panolens.js/docs/viewer_Viewer.js.html#line1903

@shadow81627 Hi, I tried your method in the code of the page and when it doesn't work, I can't figure out what's wrong. In addition to adding the above code, do I need to modify other things? Can you provide a complete test page code? Many thanks.