startSelection event. The createSelection event fires right after the user has completed drawing the shape. (I.e. the could still draw a rectangle. But then that would disappear as soon as they release the mouse.)
@GajCakarevic_gitlab ok, that's weird. I usually use
element.style.pointerEvents = 'none';But it doesn't look like that makes a difference. Can I ask which browser you are on? I just tried applyingpointer-events: nonemanually to the.a9s-annotationgroup element in the Chrome element console, and that definitely stopped mouse/tap interaction.
I'm using Chrome. I've also tested it on Firefox, but the output is the same. I'll test your method with the .a9s-annotation group element.
anno.on('createSelection', () => {
const commentWidgets = document.getElementsByClassName('r6o-widget comment')
let textField = document.getElementsByClassName('r6o-editable-text').item(0)
commentWidgets.item(0).classList.add('editable')
textField.attributes.removeNamedItem('disabled')
// -- focus the textarea
textField.focus()
})
anno.selectAnnotation programmatically, the event does not fire. By design, it only fires for user-triggered selections. If you select programmatically, you can execute whatever code you need to execute right after calling anno.selectAnnotation, anyway. Or am I misunderstanding your question?
1 reply
@rsimon I have these labels that are being made on creation of an annotation. So when creating a rectangle or polygon, it generates a label that shares the same id as the annotation. I have built a functionality where each element responds to another. For example, when clicking on a lable, it selects the corresponding annotation. It also works the other way around. My next problem is this...
When I create multiple annotations, I create multiple labels. When I click on an annotation, I can switch between them and the labels show which one is selected. This doesnt give any problems. However, when clicking on a label, and then selecting another annotation, it doesnt do anything. It works at random times. Also when I first click a label, then click the annotation that is connected to it, AND THEN click on another, it works fine. Is this a known issue? I cannot comprehend why it works at random times.
5 replies
2 replies
Hi guys, I have a weird bug, but i have no idea if its related to annotorious code. Basically, i have this widget that i created following this guide: https://recogito.github.io/guides/extending-the-editor/
and it works very well. however, as soon as i deploy my code to a produciton environment, the widget is not showing up. When i debug in chrome the code of my widget function, it is executed and seems to be returning a div just like in localhost. but this div is simply not showing up in the DOM. 😢 and i have no errors in the console, either. Any idea what could cause this?
var anno = Annotorious.init({
image: 'hallstatt',
widgets: [
{ widget: MyWidget, force: 'plainjs' }
]
});force: 'react' if it's a React widget.
1 reply
anno.addAnnotation({
"type": "Selection",
"id": 'new',
"target": {
"selector": {
"type": "FragmentSelector",
"conformsTo": "http://www.w3.org/TR/media-frags/",
"value": `xywh=pixel:${opts.x},${opts.y},${opts.w},${opts.h}`,
"source": "cognidox-confidential"
}
},
"metadata": {
"private": true,
"editable": true
},
"body": [],
"@context": "http://www.w3.org/ns/anno.jsonld"
}) "body": [{
"purpose": "commenting",
"type": "TextualBody",
"value": n.text,
"creator": {
"id": n.login,
"name": n.displayName
}
}]args.
Annotorious.init({
image: 'my-image',
widget: [{
widget: MyWidgetClass, foo: 'bar'
}]
});