search

stephanrauh / ngx-extended-pdf-viewer

A full-blown PDF viewer for Angular 16, 17, and beyond
https://pdfviewer.net
Apache License 2.0
473 stars 181 forks source link

Creating new annotation tools and customise draw tool #1811

Closed madhuputtam1992 closed 1 year ago

madhuputtam1992 commented 1 year ago

Hello,

I would like to create new annotation tools and customise draw tool please suggest me how I can do this,

Annotation Tools - in order

  1. Highlight: The user selects the highlighter option. The user is then able to click, drag and draw a rectangle on the area/text in document that will appear in bright yellow.
  2. Laser Pointer: When selected, shows a bright red dot where ever the users curser is in the document.
  3. Draw: When user selected draw tool then, it should allow user to draw on the document in bright red by default and we should not allow user to pick the draw line colour.
  4. Callout: When selected, the user can click, drag and draw and draw a rectangle on the document. The rectangle should in light green. The app will then show a zoomed in popup of the selected area over the top of the document like popup.
  5. Eraser: Removes any other tool markings when it is selected and the user clicks on something.
  6. Reset: Removes all Broadcast tool markups from document. Also resets document when callout is used.
stephanrauh commented 1 year ago

@Calixteman Please have a look at the suggestions above. I suppose at least of the idea would be nice additions to pdf.js. How do you like the ideas?

stephanrauh commented 1 year ago

@madhuputtam1992 At the moment, the annotations are embedded deeply in the pdf.js code. You can modify them, and I can give you some guidance, but it's not that easy. Maybe a future version of my library can make this stuff more accessible to Angular developers. Have a look at this folder: https://github.com/stephanrauh/pdf.js/tree/bleeding-edge/src/display/editor. The current editors are implemented here.

  1. In part, this reminds me of the new stamp editor feature (see https://mozilla.github.io/pdf.js/web/viewer.html and click on the "image" button on the right-hand side of the toolbar). You'd just have to adjust the color and to remove the open-file dialog.
  2. Sounds like a classical use-case of fancy CSS. I can't promise anything, but I suppose searching for "custom CSS cursor" or something like this reveals a solution.
  3. I can offer implementing a [(drawEditorColor)] attribute. If you want to do it yourself, you'd have to fork pdf.js. In the long run, that's cumbersome.
  4. Whow. You make it sound like a cute magnifying-glass effect. Love it! However, converting your idea to actual source code requires some thought. It sounds fascinating enough to implement it in ngx-extended-pdf-viewer. I could implement a "select area" tool and allow developers to add callbacks. As things go, you probably need multiple callbacks, so I'd have to support that, too.
  5. @Calixteman The last time I tried your editors on a mobile device, I wondered how to get rid of my drawings and texts. Have you already implemented a solution for that? If not, the "eraser" might be your friend.
  6. Maybe the best approach is a brute-force approach: set [src]="undefined" and set it to the proper URL after a short timeout again.
calixteman commented 1 year ago

Definitely, some ideas here are interesting: I shew them to the team. About mobile device, pdf.js is now used as the pdf viewer in Firefox for Android but we didn't plug the editing features exactly for the reason you're describing (and because we need some specific UI). But it's something we want to do in the second half of the year.

stephanrauh commented 1 year ago

@Calixteman That's great news! Basically, my project is meant to be a shallow wrapper around pdf.js, so I try to implement add-ons only if I'm sure you guys aren't working on similar features. In other words, I'm happy you're so answering my questions so reliably and so fast!

stephanrauh commented 1 year ago

@madhuputtam1992 I've learned the hard way not to make promises, but I'm considering implementing the highlighter (1) plus an API allowing you to plug in arbitrary Angular code which enables you to implement (4), plus attributes like [(drawEditorColor)], [(drawTextColor)],[(drawEditorOpacity)], and[(drawEditorThickness)]`. The names are subject to change because they sound a bit weird.

As for 2 and 6, I hope my hints do the trick for you.

Remains 5 (the eraser). That's definitely the domain of pdf.js, but in the meantime, my proposed highlighter-plus-callback should enable you to implement the feature yourself. I've already implemented a feature allowing you to remove editors. For some reason, I didn't find my implementation, so either I need to make it more accessible or to write proper documentation.

madhuputtam1992 commented 1 year ago

@stephanrauh thank you! for your response:) I am able to achieve Highlighter, Laser Pointer, Eraser and Reset but I am struggling to implement Callout functionality that's why I came to here and I tried in different approaches but no use.

Finally I decided to convert callout content to image and then show it on popup. To achieve this, I am using the html2canvas library to convert the content of the callout area to an image. "I hope this will work!"