TextSelection Popup

Technical Support WebViewer
1

Product:
WebViewer Version: 10.11

Please give a brief summary of your issue:
When adding a custom element to my textPopup menu it offsets the popup. Is there a way to fix this?

WebViewerInstance.UI.textPopup.update({
    type: 'customElement',
    render: () => {
        <div>Adding Custom Element</div>
    }
})

If I add default elements,

...textPopup.update({ dataElement: 'textHighlightToolButton'})

,it still works, but any customElement starts shifting the display of the popup menu. It seems the left side is aligned with the center but then runs off to the right.

1 Like
2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.

It seems like the custom element you’re adding to the textPopup menu is affecting the alignment of the popup. This can happen if the dimensions of the custom element are not taken into account when the popup’s position is calculated.

Some things you can try:


  • Ensure that your custom element has explicit width and height styles set to prevent unexpected size changes that could affect alignment.

  • Use CSS to adjust the positioning of the popup after adding the custom element. You might need to use negative margins or offsets to realign it properly.

  • Check if the custom element’s dimensions can be dynamically calculated and adjusted to fit within the existing popup dimensions.

  • Consider using the onShow event of the textPopup to adjust the position after it is rendered.




Here are some resources that might help you:



Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like
3

Hello danielsharma,

Thank you for reaching out!

textPopup.update takes takes in a list of items,
try:

WebViewerInstance.UI.textPopup.update([{
    type: 'customElement',
    render: () => {
        <div>Adding Custom Element</div>
    }
}])

Best regards,
Tyler

1 Like
4

Hey Tyler,

That was just a typo in my message. I am able to get them to render.

This is the image with the default textPopup buttons working, and adding them this way I get no issues with the centering of the popup. These are added via:

      instance.UI.textPopup.update([
        { dataElement: 'textHighlightToolButton' },
        { dataElement: 'textHighlightToolButton' },
        { dataElement: 'textHighlightToolButton' },
        ...
      ])

image

Where I run into issues is when I add a custom element like this.

      instance.UI.textPopup.update([{
        type: 'customElement',
        render: () => (
          <p>'This is a custom element'</p>
        )
      }])

image
Adding a custom element to the popup menu makes it offset for some reason. I even experimented with a mixture of the default dataElement buttons with a customElement and the same result of a off-centered popup displays. It looks as if the left of the popup menu is centered but then runs off, whereas by adding default buttons it stays properly centered about the middle.

1 Like
5

I have been still attempting to resolve this, but sadly no luck. Would love to get to a solution.

1 Like
6

While doing some more digging, it seems that there’s an issue with this:

export const getTextPopupPositionBasedOn = (allQuads, popup, documentViewerKey = 1) => {
  const { left, top } = calcTextPopupPosition(
    getSelectedTextPosition(allQuads, documentViewerKey),
    getPopupDimensions(popup),
    documentViewerKey,
  );

  return { left, top };
};

Adding customElements don’t seem to influence the width when it tries to pull it from this function. I found this by messing around in the developer tools. I notice that when I translate X by -(width / 2) it is positioned in the center how it should be.

The annoying thing is that both this and annotation popup are using shared functions, and adding customElements works for the annotationPopup but not for the textPopup.

Dug through more documentation to see if there is an event listener that fires when the textPopup appears, and it doesn’t seem like it. My idea was just to get the contents width via the shadow DOM and translate the popup, but the closest thing I could find regarding event listeners is the textSelected event which is not sufficient given that the text popup occurs after this.

1 Like
7

Hello @danielsharma7839,

Using the code provided I was able to reproduce the issue you were describing.

Modifying your code, I was able to find a code snippet which appears to render correctly for custom elements. See the following code:

      const renderCustomElement = () => {
        const element = document.createElement('p');
        element.textContent = '\'This is a custom element\'';
        return element;
      };

      
      instance.UI.textPopup.update([{
        type: 'customElement',
        render: renderCustomElement,
      }]);

Using this code, it renders as follows:

image
image475Ă—237 24 KB

Additionally, if you are trying to capture when the popup opens, you can use the visibilityChanged event. You can find the API doc here: https://docs.apryse.com/api/web/UI.html#event:visibilityChanged

Feel free to try the following code snippet:

      instance.UI.addEventListener('visibilityChanged', (e) => {
        if (e.detail.element === 'textPopup' && e.detail.isVisible) {
          console.log('textPopup opened');
        }
      });

Let us know if this works for you!

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

1 Like