How to prevent deselect previous selected annotation's object with setToolMode Method

Hello Team,

If I drawn elipse object on pdf through elipse annotation tools and going to choose Select annotation tool then previous elipse object should be in selected mode… but currently it’s going to deselect.

After choosing select tool when I clicked on that drawn elipse object then it’s in selected mode and working properly. I can drag and drop it on pdf.

I think it’s happening cause of setToolMode methods. it remove all selection.

Could you please suggest me?

Thanks

1 Like

To get a better understanding of this issue, could you please let us know which platform you are on (ie. is this for WebViewr, PDFTron Android SDK, etc.).

Thank you.

I’m using reactjs tech and inside that using Webviewer.

Hello there.

I’m not entirely sure if I understood the issue. Could you please record a video of you reproducing the issue?

Also, I have some questions:
1 - What version of WebViewer are you using?
2 - The second code snippet (setToolMode function) is from your project or WebViewer?
3 - Can you reproduce the issue on one of our samples/demos?

Product: @pdftron/webviewer

Product Version:7.2.0

issue:

hey @dfelix
here you can see i selected and annotation but when i change the tool ( “with setToolMode()” method ) i don’t want to deselect this annotation is there any way to do it? thanks :blush:

Hello there.

There is no easy way to do this with our current API (or the 7.x API), but you can override the Tool prototype in order to achieve this.

  const { Tools, docViewer } = instance;

  const ie = (function() {
    const ua = navigator.userAgent.toLowerCase();
    const match = /(msie) ([\w.]+)/.exec(ua) || /(trident)(?:.*? rv:([\w.]+)|)/.exec(ua);
    return match ? parseInt(match[2], 10) : match;
  }());

  let currentCursor;

  function setCursor(docViewer, value) {
    if (currentCursor !== value) {
      const viewer = docViewer.getViewerElement();
      if (viewer) {
        if (ie) {
          if (value === 'zoom-in') {
            viewer.style.cursor = `url("../assets/zoom-in.cur"), default`;
          } else if (value === 'zoom-out') {
            viewer.style.cursor = `url("../assets/zoom-out.cur"), default`;
          } else {
            viewer.style.cursor = value;
          }
        } else {
          viewer.style.cursor = value;
        }
        currentCursor = value;
      }
    }
  }

  Tools.Tool.prototype.switchOut = (newTool) => {
    setCursor(documentViewer, 'default');
  };

Quick note: this is an adapted code from 8.x, but it should work fine in 7.x. Let me know if you run into any issues.

Sorry, It’s not working. I tried it.

Hello there.

Do you get any errors?

No, I don’t get any errors but it did not work.

Could you add a console.log statement as indicated below and let me know if it’s being logged or not, please?

 Tools.Tool.prototype.switchOut = (newTool) => {
    console.log('got here Tools.Tool.prototype.switchOut');
    setCursor(documentViewer, 'default');
  };


Code:

if (ie) {} condition is not working and if (currentCursor !== value) is working for one time.

Hello there.

How is the ie condition not working? do you get errors?

How did you assess that the current cursor conditional works only once?

Is this code encapsulated on a react component? if so, could you share it?

=> As you can see I logged in console with “Internet explorer ie” and showing null.
=> First time it goes inside condition when select any tool from toolbar and again try to change tool then log is not displaying.
=> Yes, we’re trying to work in reactjs

Hello there.

I’ve got a little mistake in the code: was using documentViewer, but the variable name is actually docViewer. Apart from that, the code is working as you can see in this recording: Screen Recording 2022-03-02 at 5.31.55 PM.mov - Google Drive.

I’m sending the code again with the small fix included.

const { Tools, docViewer } = instance;

  const ie = (function() {
    const ua = navigator.userAgent.toLowerCase();
    const match = /(msie) ([\w.]+)/.exec(ua) || /(trident)(?:.*? rv:([\w.]+)|)/.exec(ua);
    return match ? parseInt(match[2], 10) : match;
  }());

  let currentCursor;

  function setCursor(docViewer, value) {
    if (currentCursor !== value) {
      const viewer = docViewer.getViewerElement();
      if (viewer) {
        if (ie) {
          if (value === 'zoom-in') {
            viewer.style.cursor = `url("../assets/zoom-in.cur"), default`;
          } else if (value === 'zoom-out') {
            viewer.style.cursor = `url("../assets/zoom-out.cur"), default`;
          } else {
            viewer.style.cursor = value;
          }
        } else {
          viewer.style.cursor = value;
        }
        currentCursor = value;
      }
    }
  }

  Tools.Tool.prototype.switchOut = (newTool) => {
    console.log('GOT HERE SWITCH OUT', newTool.name)
    setCursor(docViewer, 'default');
  };

Can you try it out and let me know how it goes?

Hello dfelix,
I think we’ve some misscommunication related task discussion. I’m trying to explain again.
So we’re using pdftron webviewer for drawing annotation on any type of file.
Step:

  1. For e.g. first choose pdf file
  2. Select Elipse tool from toolbar and draw elipse annotation on pdf file so after draw it would selected and highlight on pdf and display their information on sidebar
  3. Then we’re going to choose select tool for annotation selection purpose on pdf
  4. So When as we click on select tool from toolbar then previous selected elipse annotation on pdf highlight gone (Step 2) and deselected
    But we want it to remain selected whenever click on select tool after any tool drawn.

Hello there.

Yeah, I’m pretty sure this was what I’m trying to achieve with the code snippet provided.

I guess a little explanation will be handy: When you switch from one tool to another, this method switchOut is invoked. One of the things that happen inside its native implementation is a call to the deselectAllAnnotations API. What this code snippet does is just override the switchOut function without this API call.

Let me know if this works for you and if you have any further questions about it.

@dfelix please review this and suggest me.
Thanks

Hello there.

I guess you are assessing if the annotation is selected or not by the right panel having the annotation’s information or not. I’m afraid this might be related to something else, like, for example, you already having event listeners that populate the data on the right column. Also, I see you are still using 7.2, so that might be an issue.

My recommendation here is:
1 - Update WebViewer to 7.3
2 - Remove all customization and configuration over WebViewer and try the code I’ve sent previously

Let me know if it doesn’t work and we can move from there.