search

annotorious / annotorious-openseadragon

An OpenSeadragon plugin for annotating high-res zoomable images
https://annotorious.github.io
BSD 3-Clause "New" or "Revised" License
121 stars 43 forks source link

Angular 15 import #181

Open Edo2610 opened 1 year ago

Edo2610 commented 1 year ago

I have to use Annotorious on angular 15 using these versions:

"openseadragon": "^4.1.0",
"@recogito/annotorious-openseadragon": "^2.7.10"

and when I develop I not have any problem with Annotorious plugin, it works perfectly! When I build my angular app and I deploy it, I get this error when I use Annotorious constructor

image

that correspond at this line of code this.annotorious = Annotorious(this.viewer, this.annoOptions);

Does anyone have a solution?

N.B. I try to import in two way and I still always have the same problem:

Edo2610 commented 1 year ago

[RESOLVED]

Seraching on the source code I suppose that something is wrong in the way that I use to import the library. Following the official Getting Started guide

image

I get the error. Importing the library in this way import OSDAnnotorious from '@recogito/annotorious-openseadragon'; and using the constructor OSDAnnotorious instead of Annotorious all works well also during deploy and in prod mode!!

Edo2610 commented 1 year ago

@rsimon pheraphs the Getting Started guide can be fixed and also an option that creates a definitions file (.d.ts) can be added during build to not incur in this errors!

lumalav commented 1 year ago

[RESOLVED]

Seraching on the source code I suppose that something is wrong in the way that I use to import the library. Following the official Getting Started guide

image

I get the error. Importing the library in this way import OSDAnnotorious from '@recogito/annotorious-openseadragon';` all works well also during deploy and in prod mode!!

Hey! I am trying your solution and its not working for me... its throwing a annotorious_openseadragon_1.default is not a constructor

Is there a way that you could help me here in this stackblitz?

Thanks!

Edo2610 commented 1 year ago

The problem is that you are using annotorious plugin for osd but the img is not loaded with osd. Anyway not only the import is OSDAnnotorious but also the contructor. I edited my solution upper!

Check this example

lumalav commented 1 year ago

@Edo2610 Awesome! thanks so much man.

niyato commented 12 months ago

It's okay to hold down the mouse and drag to draw a rectangle, but what happens when you can't draw a label after just one click

rsimon commented 11 months ago

Concerning Angular integration: I'm reposting from a similar issue here:

If anyone is still listening on this issue: the next major release of Annotorious is getting closer to release-ready. It's a complete re-write, and I believe that it will make integration with different frameworks much easier.

As of now, v3 has practically no documentation, and it doesn't have feature parity with v2.7. (Most importantly, it's headless mode only for now.) But if anyone wants to look: I believe it will solve a lot of the tedious interoperability issues that you are facing.

As written above, I'm not an Angular person. Which means I can still not give any advice. But if you look at how integration is done for React and Svelte, you might find some inspiration on how to do it for Angular.