annotorious / annotorious-openseadragon Goto Github PK

There is a bug after the polygon drawing while clicking the cancel button on the editor panel. I draw a polygon then the editor panel appears and when I click the cancel button the editor panel disappears but the polygon does not. The polygon still appears even if clicking the cancel button. The same steps work while drawing a rectangle, but it doesn't work by drawing a polygon.

Could you fix this bug, please?

(tested with chrome browser)

The recent release made the bundle importable via NPM. In order to make this happen, it was necessary to import the MouseTracker and Point classes from the openseadragon NPM package.

The problem now, is that the annotorious-openseadragon build bundles all of OpenSeadragon into the distribution. Not a problem per se, but it inflates the size of the plugin to >500kB. I wonder what the best way would be to import just MouseTracker and Point, and not all of OpenSeadragon.

Port bugfix from Annotorious 2.3.2.

Allow apps to toggle headless mode at runtime (not just init time). Some plugins will need this.

Can you create an unselectAnnotation event, so we can change control state of the previously selected annotation. i.e. unhighlight an annotation that was previously highlighted through the selectAnnotation event.

When you create an annotation through the UI, the new annotation is assigned an id, this takes the form #GUID.

Is the # part of some standard that needs to be there? I'll have to strip this out in order to save the annotation to a database with a column type of GUID.

Looks like I can add annotation without the #, so it's just an issue through the UI created ones.

Standard Annotorious now has touch support. Port the feature to the OSD plugin.

I switched from using "plain" plugin to the openseadragon plugin and it seems like the formatter callback is not called, in the plain plugin i used this callback to add a class to thr annotation g element
Is it a bug ?
Thanks

Similar to the one that comes with OpenSeadragon, but taking an annotation (id) as an argument. Also take an immediate argument (and forward to OSD).

I am having trouble loading annotations after they are created. I can create the annotations fine but once I refresh the page, they are gone. I think it has something to do with this error I am getting

Could you please share the openseadragon-annotorious.js file? I found a minified js file called openseadragon-annotorious.min.js, but it is hard to understand even if I make the file unminified.

Hi,
While adding a new polygon, the editor popup shows out of the div, and sometimes we cannot see the popup because of that.
While adding a new rectangle, the editor popup shows inside of the div, so there is no problem for the rectangle.

Can you fix this problem for the polygon?

See this twitter thread: OpenSeadragon exposes the IIIF source URI somewhere inside the IIIFTileSource. Annotorious can simply check whether the current source is IIIF, and use the ID attribute (or always use the ID attribute in case there is one.)

We need to figure out what's needed to support annotation of a multi-tilesource setup. The key question to answer is how to get proper image coordinates.

Can we prevent the default Editor/CommentWidget from showing.

Something like

var anno = AnnotoriousOSD.init(openSeadragonViewer, { showEditor: true/false } );

Then using the selectAnnotation and createAnnotation events a dev can popup there own Editor.

If you cancel an annotation through the UI, it leaves the draw rect on the canvas.

To reproduce ~ Draw new annotation, Editor Shows, Press Cancel button, annotation remains on screen.

I'm getting an error message when I delete an annotation.

openseadragon-annotorious.min.js:1 Uncaught ReferenceError: annotation is not defined
    at Object.onAnnotationDeleted (openseadragon-annotorious.min.js:1)
    at Object.u [as click] (openseadragon-annotorious.min.js:1)
    at HTMLButtonElement.b (openseadragon-annotorious.min.js:1)

Is it possible add another event to start an annotation?
To start an annotation it is now required hold the shift key. For a not expert user it can be not easy to use.
So it can be helpful add an event listener to start the tracking on click on a DOM element with a certain id.
For example, in OSDAnnotationLayer.js, add the following lines:

document.getElementById("annotorious-start-selection").addEventListener("click", () => { this.mouseTracker.setTracking(true); });

How can we add annotation with style options such as line colour, width etc.

Looked at Web Annotation Model and came up with this

        var annotation = [
            {
                "type": "Annotation",
                "stylesheet": {
                    "type": "CssStylesheet",
                    "value": ".red { color: red }"
                },
                "body": [{ "type": "TextualBody", "value": "Logo", "purpose": "commenting" }],
                "target": { "selector": { "type": "FragmentSelector", "conformsTo": "http://www.w3.org/TR/media-frags/", "value": "xywh=pixel:4529.12646484375,1530.34130859375,871.17236328125,131.33251953125" }, "styleClass": "red" },
                "@context": "http://www.w3.org/ns/anno.jsonld", "id": "#3e4502d0-923a-11ea-95ff-25ef2ceeaad8"
            }]

but it did not display annotation in a red colour.

Outside of readOnly mode, I am able to create, edit, and delete annotations with no issues, but as soon as I set readOnly to true and attempt to create an annotation, this happens:

Also, when I am logging anno.readOnly I am getting that it is undefined even though I am setting it on the previous line.
Here is my init code:

var perms = drupalSettings.recogito_integration.permissions;
  var user_data = drupalSettings.recogito_integration.user_data;
  var readOnly1 = (!perms['recogito create annotations'] &&
      !perms['recogito edit annotations'] &&
      !perms['recogito delete annotations'] &&
      !perms['recogito edit own annotations'] &&
      !perms['recogito delete own annotations']);

  var image_anno = OpenSeadragon.Annotorious(viewer);
  image_anno.readOnly = (readOnly1 || window.location.search !== "?mode=annotation");
  image_anno.disableEditor = image_anno.readOnly;
  image_anno.setAuthInfo({'id': user_data.id, 'displayName': user_data.displayName});

  var page_url = window.location.pathname;

  jQuery.ajax({
    type: "GET",
    url: "/recogito_integration/get",
    dataType: 'json',
    headers: {
      'pageurl': page_url,
    },

    success: function (data) {
      console.log(data);
      for (annotation in data) {

        w3c = convert_annotation_w3c(data[annotation]);
        if(w3c.type != "Annotation")
        {
          image_anno.addAnnotation(w3c);
        }
      }
    },
    error: function (xhr, status, error) {
      alert(xhr.responseText);
    }
  });


  image_anno.on('selectAnnotation', function (annotation) {

    highlightAnnotatedContent(annotation);

  });

  image_anno.on('createAnnotation', function (annotation) {

    console.log("createAnnotation: " + typeof annotation);
    create_annotation(annotation);
  });

  image_anno.on('updateAnnotation', function (annotation, previous) {

    console.log(annotation);
    console.log(previous);
    update_annotation(annotation, previous);
  });

  image_anno.on('deleteAnnotation', function (annotation) {
    delete_annotation(annotation);
  });

See annotorious/annotorious#114

Annotorious really needs proper tests. jest-puppeteer was recommended as a good option for testing browser interaction workflows. See

https://pptr.dev/#?product=Puppeteer&version=v8.0.0&show=api-class-mouse

for mouse move examples.

If anyone wants to help out with this, do let me know!

For some reason, vite produces a significantly larger bundle (600+kB vs. ~400kB).

Some corner points are stored multiple times in the SVG polygon.

Would it be possible to pass a padding value with the fitBound method.

anno.fitBounds(annotation.id, false, 20);

where 20 is 20px.

All the other functionality just released works beautifully!!

Sync with latest API changes in Annotorious standard

i'm playing with webview to make a desktop app with annotorius that persists annotations locally into an sqlite file.

i will publish in github soon, meanwhile 👇

the problem: i'm opening new canvases from IIIF manifest with viewer.open(), but when changing the tile the annotation layer persists. i'm wondering if can be useful an api method to clear all annotations (not actually the current destroy() method)

this new clear() method could be sticked inside osd open event.

or maybe i can use anno.getAnnotations() and then looping and remove every annotation?

PS/ right now .getAnnotations() seems missing
o.annotationLayer.getAnnotations is not a function. (In 'o.annotationLayer.getAnnotations()', 'o.annotationLayer.getAnnotations' is undefined)

Good day,

I have integrated the annotrious-openseadragon into my project and overall it's working quite well! Although I noticed that when the application goes into full screen mode, all of the annotations seem to disappear. Any thoughts on why this is happening and how to remedy? I am using a bleeding edge head revision of the base annotrious library because I require the annotation editability so that may be a factor.

Again, thanks for all the great work! This project saved my bacon!

Thanks!
Brian

Would it be possible to implement a kind of a point-undo-functionality? for example clicking right?

Would it be possible to get a thumbnail of the image within the bounds of the annotations rectangle? This could then be saved and used to show an index of the available annotations for example.
The image data would be posted back in the created event as 64bit data string?
This might be achievable via open seadraggon all ready??

I see headless mode (and disableEditor) allows for just the drawing aspect of the plugin... is there a way to disable the draw and the editor programatically? End goal here is to allow users to toggle annotorious on and off as needed.

I have the OSD Nagivator control in the BOTTOM_RIGHT position. When you draw an anotation which might touch it, the draw rectangle inverts and jumps to the top left position.

I attach two screen shots of this behaviour.

While trying to get all the current annotations in the selectAnnotation event handler, the following error is thrown:

OpenSeadragonAnnotator.jsx:241 Uncaught (in promise) TypeError: Cannot read property 'clone' of undefined
    at OpenSeadragonAnnotator.jsx:241
    at Array.map (<anonymous>)
    at p.getAnnotations (OpenSeadragonAnnotator.jsx:241)
    at e.getAnnotations (index.js:131)
    at (index):101
    at n.emit (index.js:36)
    at Object.onAnnotationSelected (index.js:73)
    at p.<anonymous> (OpenSeadragonAnnotator.jsx:83)
    at index.js:271
    at Array.some (<anonymous>)

Need to figure out what‘s going on there. Currently doesn’t work at all. Z-index is only one part of the issue.

Just like in standard Annotorious. Should by mostly a bit of extra plumbing.

Looks like this could be pretty much (im)ported 1:1 from standard Annotorious, just requires similar plumbing as in the selectShape method of AnnotationLayer.js.

Port latest fixes included in Annotorious 2.3.2.

It looks like touch navigation breaks when starting a touch gesture on an annotation. Once this was done once, touch navigation remains broken! As long as you just select an annotation (with a single tap), or do pan/pinch gestures outside of annotation shapes, things work just fine.

Note: this is almost certainly related to OSD's weird ways of handling touch/mouse events, and might (hopefully) go away with the release of OSD 3.0, for which event handling was thoroughly revised.

Similar to the one that comes with OpenSeadragon, but taking an annotation (id) as an argument. Also take an immediate argument (and forward to OSD).

See: https://gitter.im/recogito/annotorious?at=603f9b29823b6654d27ec8f1

Can the events mouseEnterAnnotation(annotation, e) and mouseLeaveAnnotation(annotation, e) be make public.

Can there be a selectAnnotation method.

var selectedAnnotation = anno.selectAnnotation('#GUID');

Pass annotation id to select, return annotation object if found.

Seadragon supports displaying multiple images using "sequenceMode". When this is enabled Seadragon allows one instance of the viewer to display multiple images. Annotorious seems to place the annotation on the canvas without regard to the intended image. As the image changes in Seadragon, the original annotation stays.

Allow apps to toggle readonly mode at runtime (not just init time). Some plugins will need this.

There does not appear to be a .destroy() method. Subsequent .init() methods seem to work though, so switch between different images with .init() works, but previous versions have had .destroy() method.

It's technically a pointless operation anyway. But the API should just ignore the call without throwing an error.

This was recently fixed in standard Annotorious:
annotorious/annotorious@a452e35

Repeat steps here, too.

I'm trying to use the plug-in.
I'm calling:
var anno = OpenSeadragon.Annotorious(myViewer);
This creates an object
Afterwards, I call:
anno.loadAnnotations('annotations.w3c.json');
But this Promise object remains pending

I don't see any icons to use for annotation.
I'm missing something and would really appreciate some guidance.
Regards

Added recently to Annotorious standard version. A bit of plumbing is needed to make it work in OSD, too.