Demos codes for annotorious openseadragon

[drisssadoun]

Hello,

Are the codes for the two demos on the ‘Getting Started’ page (https://annotorious.dev/getting-started) available?

I ran a few tests on a project. I can't figure out how to create resizable and draggable rectangles or polygons like in the demos.
Also, when you click on an annotation, it disappears and you have to click on another annotation or on the image for it to reappear. The creation process is quite complex because when you click on the image, the openseadragon events apply and the image enlarges or moves without an annotation being created.
Below is a screenshot of my test. The two visible annotations (rectangle and polygon) are created when the page loads. Unlike the example of the demo (see screenshot of Getting Started page), there are no points in the corners to resize them and no icon to move them appears when you hover over them.

Any help would be greatly appreciated.

Best regards.

[rsimon]

Can you create a reproducible example online, e.g. with StackBlitz or CodeSandbox? From the screenshot, it's impossible to say what's going wrong in your case I'm afraid.

• The "Getting Started" demo is here.
• You can also check the dev/test pages in the Annotorious repos for minimal examples:
  • For @annotorious/openseadragon: https://github.com/annotorious/annotorious/blob/main/packages/annotorious-openseadragon/test/index.html
  • For @annotorious/react (OSD integration): https://github.com/annotorious/annotorious/blob/main/packages/annotorious-react/test/openseadragon/App.tsx

[drisssadoun]

Hello @rsimon,
Thank you for the links.
While exploring the examples you've pointed, I still don't see what's going wrong and why annotations are not draggable, resizable or editable.

I can't put the whole symfony project on 'codesandbox' so I've put two js file (in js directory) and the html twig file where openseadragon and annotorious are displayed : https://codesandbox.io/p/devbox/broken-hill-gdqsjw

I also attach a video displaying the current behaviour of annotorius annotations. When an annotation is clicked it seems to be selected as its style changes (Thick red strokes) but there are no handles displayed and no way to drag or resize the annotation. Do you have any idea of how to make it work ?

Thanks a lot for your help.

Node version : v20.11.1
"@annotorious/annotorious": "^3.7.0",
"@annotorious/openseadragon": "^3.7.0",
"openseadragon": "^5.0.1",

annotorius.webm

[rsimon]

Sorry, it will be difficult to debug your issue without being able to try your code live. (I'm afraid I don't have the bandwidth of diving deepr into your code, and rebuild your setup.) Did you try starting with a basic example? Just a sample image, without embedding it into your app? See if this works and then debug step by step? Things might go wrong, for example, if your app somewhere triggers a full re-initialization of Annotorious at some point. I also note that you are listening to an event selectAnnotation which does not exist. Did you follow the official docs at https://annotorious.dev? The basic examples there should get you started.

[drisssadoun]

Ok, thank you for answers and for your time. I'll try with a simpler example as you suggest.
Best regards.