Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Rainer Simon
    @rsimon
    Thanks @KennySmash for all the support :-) @0einstein0 just to add: if you want to cancel selection right when the user starts drawing, you need to use the 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.)
    Otherwise this should work (I think). Thanks folks!
    Gaj Cakarevic
    @GajCakarevic_gitlab

    @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 applying pointer-events: none manually to the .a9s-annotation group 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.

    Kenny Webb
    @KennySmash
    @rsimon is it possible for me to change how the editor attaches to the annotation? I want to use .a9s-inner as the target rect rather than .a9s-annotation
    16 replies
    Fatimah Zulfiqar
    @0einstein0
    Hola amigos, so after I delete the annotation, for some reason annotations.length is still 1, even though in the deleteAnnotation event handler I clear the annotations and it shows the length to be zero
    1 reply
    Kenny Webb
    @KennySmash
    you should look at using a service like https://codesandbox.io/ so you can share code, it will make it much easier to get help if we can poke around in the actual code
    Fatimah Zulfiqar
    @0einstein0
    Okay I fixed it somehow, got an epiphany, while I was deploying it on sandbox, :)
    1 reply
    Kenny Webb
    @KennySmash
    Good stuff
    Gaj Cakarevic
    @GajCakarevic_gitlab
    Can I add a fill after the creation of an annotation? I tried to do .a9s-inner { fill: #fff; } but that fills while creating the annotation
    Kenny Webb
    @KennySmash
    prepend that with a .a9s-annotation as a parent selector and it should do
    kjp1182
    @kjp1182
    Can i set by default set focus on comment textarea when add point annotation? Currently we need to manually click on textarea to set focus
    Kenny Webb
    @KennySmash
    you can use events to fire off a click,
    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()
    })
    or a focus in my case
    also depending on the rest of your app, you may need to wrap the internals of the event with a setTimeout of ~50ms
    kjp1182
    @kjp1182
    when add point annotation then automatically focus not set on comment textarea how should i do that?
    Kenny Webb
    @KennySmash
    Can you share your current code?
    Fatimah Zulfiqar
    @0einstein0
    image.png
    image.png
    image.png
    When I update it, it shows two annotations for some reason, the annotation object also returns two elements
    but when I refresh it shows the correct updated one
    Fatimah Zulfiqar
    @0einstein0
    Nvm guys, it wasn't assigning unique IDs. Fixed it
    Gaj Cakarevic
    @GajCakarevic_gitlab
    Yo, how can I fire on.('selectAnnotation') through selectAnnotation(id)?
    Rainer Simon
    @rsimon
    If you call 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
    clyndon-lab
    @clyndon-lab
    Hello @rsimon do we support dropdown field for comment ?
    2 replies
    Gaj Cakarevic
    @GajCakarevic_gitlab

    @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
    clyndon-lab
    @clyndon-lab
    image.png
    @rsimon how can I make an drop down like this in React app ? I follow the guiding but it's not popup any dropdown like this
    2 replies
    image.png
    dbil25
    @dbil25

    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?

    Rainer Simon
    @rsimon
    @dbil25 ah - interesting. That page is actually outdated and shouldn't be there anymore... I need to check the project website. Anyways: the instructions should still be accurate. What I could imagine: Annotorious checks, on runtime, whether a widget is a React extension, or a VanillaJS extension. It does get confused a lot, depending on which minimizer processes the code. There's a config option you can use to override the check. Can you try the following?
    var anno = Annotorious.init({
      image: 'hallstatt',
      widgets: [
         { widget: MyWidget, force: 'plainjs' }
      ]
    });
    ..or force: 'react' if it's a React widget.
    dbil25
    @dbil25
    ohhh thanks ill try force: plainjs
    i'll let you know :)
    dbil25
    @dbil25
    it works @rsimon ! thank you so much!
    btw, thank you so much for this project <3 your amazing work is not taken for granted!!
    1 reply
    sinamcr7
    @sinamcr7
    hi, I wanted to use loadannotations() function on annotorious, but there isn't any examples to how use it and if its possible to pass variable or file to function, can anyone send some examples please
    Kenny Webb
    @KennySmash
    @sinamcr7 you need to pass it a url where a properly formatted JSON is returned, I like to get my data in a different way however and rather pull in my data and then transform it to the correct structure and load it in via anno.addAnnotation
    heres a snippet of my final transformer :
    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"
        })
    the body can be expressed like so:
     "body": [{
                        "purpose": "commenting",
                        "type": "TextualBody",
                        "value": n.text,
                        "creator": {
                            "id": n.login,
                            "name": n.displayName
                        }
                    }]
    Kenny Webb
    @KennySmash
    in the first block, metadata is my own data, and source should be the location of the object you are annotating
    sinamcr7
    @sinamcr7
    @KennySmash thank you so much
    Kenny Webb
    @KennySmash
    Pleasures all mine
    @rsimon whats the best way to provide options to the user preferably in the init options?
    Rainer Simon
    @rsimon
    @KennySmash thanks for helping out!
    @KennySmash re options: do you mean you want to forward config options to custom widgets? You can just add any config param to the init object, and those will all get forwarded to the args.
    Annotorious.init({
      image: 'my-image',
      widget: [{
        widget: MyWidgetClass, foo: 'bar'
      }]
    });
    Rainer Simon
    @rsimon
    In this case, the args handed to the widget function would have an args.foo field, with value 'bar'.
    Kenny Webb
    @KennySmash
    I managed to do the changes I spoke about and wanted to add them in for a PR I can put in
    I have the options sitting as just floating vars but would like to forward a user config to them (this is to prevent the use of the delete key while editing is happening), also got a change where I make the editor ignore pointer events due to a bug when resizing the selection, the editor window was consuming a fast change in selector height