Hi ! I am trying to instantiate an Annotorious (2.1.5) and listening new shape draw events like this :
this.annotorious = new Annotorious({
image: document.getElementById('myImageId'),
readOnly: false,
headless : true
});
this.annotorious.on('createSelection', function(target) {
console.log(target);
});But the target is always undefined. Any suggestions on how to fix this ? Thanks
addHandler in addition to the standard tool-activation handler. But not sure how that would interfere with the rest of the tool. If you're going to attempt the implementation of the full-fledged point annotation tool, do let me know. I'm interested in that myself, and happy to help out/review. In principle, I think you should be able to just copy the code from the rectangle annotation tool, and then simplify that, to just do point selection.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious-openseadragon@latest/dist/annotorious.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-openseadragon@latest/dist/openseadragon-annotorious.min.js"></script>
<style>
html, body, #osd {
padding:0;
margin:0;
width:100%;
height:100%;
}
</style>
</head
<body>
<div id="osd"></div>
<script>
window.onload = function() {
var viewer = OpenSeadragon({
id: "osd",
tileSources: {
type: "image",
url: "https://github.com/recogito/annotorious-openseadragon/raw/master/public/1280px-Hallstatt.jpg"
}
});
// Initialize the Annotorious plugin
var anno = OpenSeadragon.Annotorious(viewer);
// Attach handlers to listen to events
anno.on('createAnnotation', function(a) {
// Do something
});
}
</script>
</body>
</html>
Did the sample code from https://recogito.github.io/guides/using-firebase-for-storage/ work for anyone? It didn't for me. It came down to an error with return query.docs[0];
Specifically, the problems come from the events updateAnnotation and deleteAnnotation, which call on the findByID function.
Might be because I am using 8.2.2 version of Firebase's SDK. However, I used Firebase's docs to update some of the code and it works now. Could share it if anyone else is having the same problem.
Anyway, here's the code I modified:
async function findById(documentID) {
const query = db.collection("annotations");
const snapshot = await query.where("id", "==", documentID).get();
if (snapshot.empty) {
console.log("No matching documents.");
return;
}
let docNumber; // to get doc.id out of forEach to be returnable, used for update and delete to refer to the right document in the db
snapshot.forEach((doc) => {
console.log(doc.id);
docNumber = doc.id;
});
return docNumber;
}
anno.on("updateAnnotation", async function (annotation, previous) {
let docNumber = await findById(previous.id);
const docRef = db.collection("annotations").doc(docNumber);
const updateData = await docRef.update(annotation);
});
anno.on("deleteAnnotation", async function (annotation) {
const res = await db
.collection("annotations")
.doc(await findById(annotation.id))
.delete();
});
I don't know how to do a pull request so it might be better if you updated the code, Rainer. Anyway, I am satisfied with most of the code but there's one part which I hope someone can find a better way:
let docNumber; // to get doc.id out of forEach to be returnable, used for update and delete to refer to the right document in the db
snapshot.forEach((doc) => {
console.log(doc.id);
docNumber = doc.id;
});
return docNumber;
}
My dissatisfaction with this part is that I can't find a way to get the ID without putting it in a forEach method. I tried snapshot[0] but that led to nowhere. I also can't return doc.id inside a forEach loop so I had to create the docNumber var. Seems pretty inefficient...
docs array normally. See here: https://github.com/recogito/recogito-client-plugins/blob/main/packages/storage-firebase/src/index.js#L14
query object and then runs the query to retrieve a querySnapshot response. Then, however, it accesses query[0] whereas it should access queryResponse[0]. I think that's what caused the problem originally.
