Cannot get the Annotorious to init

[abrahamarslan]

I can see the OpenSeadragon plugin loaded in but I cannot draw anything.

<template>
    <div id="openseadragon1"  style="width: 800px; height: 600px;">

    </div>
</template>
<script>
//import { Annotorious } from '@recogito/annotorious';
import OpenSeadragon from 'openseadragon';
import axios from 'axios';
import * as Annotorious from '@recogito/annotorious-openseadragon';
import '@recogito/annotorious/dist/annotorious.min.css';
import '@recogito/annotorious-openseadragon/dist/annotorious.min.css';
export default {
    data() {
        return {
        postData: {
            userId: '',
            title:  '',
            body:   ''
        }
        }
    },
    components: {
        Annotorious
    },
    setup: () => ({
        title: 'Sample',

    }),
    mounted: () => {
        const viewer = OpenSeadragon({
            id: "openseadragon1",
            prefixUrl: "/openseadragon/images/",
            minZoomImageRatio: 0,
            maxZoomPixelRatio: Infinity,
            tileSources: {
                type: "image",
                url: "https://cdn.pixabay.com/photo/2020/02/16/20/29/nyc-4854718__340.jpg",
                fitBounds: true
            }
        });

    var options = {
        disableEditor: false // the default editor is disabled to implement a custom behaviour
    }

    var anno = Annotorious(viewer, options);
    anno.setDrawingTool('polygon');
   }
}
</script>

Please help me.

[abrahamarslan]

@rsimon kindly help me with this

[rsimon]

Are you holding shift when dragging?

[abrahamarslan]

No i'm not holding shift.

[abrahamarslan]

Is there a problem with my versions?

   "@recogito/annotorious": "^2.7.10",
        "@recogito/annotorious-openseadragon": "^2.7.10",
        "@recogito/annotorious-selector-pack": "^0.5.3",
        "@types/openseadragon": "^3.0.5",
        "openseadragon": "^4.0.0",
        "vue": "^3.2.36"

[rsimon]

Well then I would warmly recommend reading at least through the first few lines of documentation :-) Thanks in advance.

https://recogito.github.io/annotorious/getting-started/osd-plugin/

[abrahamarslan]

Yes, I mean I have tried HOLDING the SHIFT key and NOT HODLING the SHIFT key. It keeps dragging. Is there a possible conflict with the versions, perhaps? If it's unnecessary, perhaps I'll close it.

[rsimon]

No versions look fine. Are you able to set up an online demo? Otherwise I don't know what might be causing this.

[rsimon]

Also, you might want to check the Gitter chat too. Might be an issue related to the interop with Vue. More people are reading the chat, and I don't have experience with Vue I'm afraid.

[abrahamarslan]

No problem. I'll try this in React. I suspect it's a versioning problem. Thanks for your help.

[rsimon]

You could also try with OpenSeadragon v3.x just to be sure. Although AFAIK OSD v4 should work, too.

[rsimon]

PS forgot to ask: are there any errors on the console when you init?

[Edo2610]

If you apply other canvas overlay on the openseadrgon image, you have to be sure that the Annotorious overlay will be on the other canvas and not above. I have a similar problem and I realize that I apply a canvas over the Annotorious canvas!