Is there any documentation for using this package?

[SamedhG]

Firstly, I just started integrating annotorious into my project and am really happy with the project. Thanks for creating this!

I was looking for documentation on adding the ellipse plugin. I imagine we just need to call mountPlugin, but I'm having trouble even importing this library into my react project.

Thanks!

[rsimon]

Thanks for the feedback! Yep, the documentation website is currently a work in progress. Plugin documentation is still missing entirely. The gist: there's a plugin helper component in the @annotorious/react package that will handle the plumbing for you:

import { AnnotoriousPlugin } from '@annotorious/react';
import { mountPlugin as ToolsPlugin } from '@annotorious/plugin-tools';

//...

<AnnotoriousPlugin plugin={ToolsPlugin} />

Things got changed and renamed a bit recently - I still need to test for regressions. But here's a full example of how I've used the ellipse tool in React myself. (Note that this code still uses the old package/function names!).

https://github.com/rsimon/immarkus/blob/main/src/pages/annotate/WorkspaceSection/AnnotatableImage.tsx

Let me know if you get it working this way.

[technbuzz]

i wanted to use the vanilla version in angular project, is there any guideline to add circle as drawing tool?

[rsimon]

Unfortunately, there is no special support for Angular (yet). So you'd need to follow the vanilla JS pattern. Also, there's no documentation for the plugin ;-) But it should be fairly straightforward. See the vanilla JS example here:

https://github.com/annotorious/annotorious-plugin-tools/blob/main/test/index.html#L35-L55

[technbuzz]

I think that will be enough, i don't see any problem using the vanilla version with angular as long it doesn't have unnecessary dependencies.

But i see the ellipse editor is create in svelte. how it would work with vanilla version?

[technbuzz]

looks like it's an early stage of development, just some feedback No release yet assigned and i am getting type error

[ERROR] TS2307: Cannot find module '@annotorious/plugin-tools' or its corresponding type declarations. [plugin angular-compiler]

[rsimon]

Oops. Indeed - I renamed the package recently, and managed to mess up some config in the package.json. Fixed now. New release 1.0.1 is out and should work now.

[rsimon]

Oops. Indeed - I renamed the package recently, and managed to mess up some config in the package.json. Fixed now. New release 1.0.1 is out and should work now.

[dennys]

I can build a toolbar to annotate now, the following is my code.

    <div id="toolbar">
      <button class="btn" id="rectangle">Rectangle</button>
      <button class="btn" id="polygon">Polygon</button>
    </div>

    <img id="my-image" src="d:/p.jpg" />

    <script>
      window.onload = function() {

        var anno = Annotorious.createImageAnnotator('my-image', {
            style: { fill: "#ffff00", fillOpacity: 0.4 }
        });

        document.getElementById('rectangle').addEventListener('click', function() {
          anno.setDrawingTool('rectangle');
        });

        document.getElementById('polygon').addEventListener('click', function() {
          anno.setDrawingTool('polygon');
        });
      };
    </script>

I want to use ellipse, but how to add this line to my code?

import { mountPlugin as mountToolsPlugin } from '../src';

After the above code, I think I can use the following code to draw ellipse.

mountToolsPlugin(anno);
anno.setDrawingTool('ellipse');

[rsimon]

Sorry, I didn't have the time to make the tools plugin available for script import yet.

[dennys]

Got it, still thank you for your awesome tool. I'll try to study the possibility to migrate my product to typescript.

[rsimon]

The library should be ready for script import, so it might just be a matter of tweaking the build config. I'll try to look into it over the weekend if I get the chance.

[rsimon]

I tweaked the build and published a new version. I think this should now work for script import. The CDN URLs are:

• Script: https://cdn.jsdelivr.net/npm/@annotorious/plugin-tools@1.0.2/dist/annotorious-plugin-tools.js
• Styles: https://cdn.jsdelivr.net/npm/@annotorious/plugin-tools@1.0.2/dist/annotorious-plugin-tools.css

[dennys]

Thanks, I think I need to import this plugin before execute mountToolsPlugin(anno);, can you tell me how to load it by javascript?

[rsimon]

If you import via the script tag, you'll get a global variable in your page. It should be window.AnnotoriousTools. You can log this object to confirm it's there. Then you can use the methods through that object. AnnotoriousTools.mountPlugin. (It's the standard difference between script imported stuff and ES6 imports.)

[dennys]

This is my code, I want to build a small annotation tool on my page. I'm not sure, do you mean I should run anno.mountToolsPlugin(); ? But it doesn't work.

    <script>
      window.onload = function() {

        var anno = Annotorious.createImageAnnotator('my-image', {
        style: { fill: "#ffff00", fillOpacity: 0.4 }
    });
    anno.mountToolsPlugin();

        // Event listeners for the toolbar buttons
        document.getElementById('rectangle').addEventListener('click', function() {
          anno.setDrawingTool('rectangle');
        });

        document.getElementById('polygon').addEventListener('click', function() {
          anno.setDrawingTool('polygon');
        });

        document.getElementById('ellipse').addEventListener('click', function() {
          anno.setDrawingTool('ellipse');
        });

        document.getElementById('clear').addEventListener('click', function() {
          anno.clearAnnotations();
        });

      };
    </script>

[rsimon]

AnnotoriousTools.mountPlugin(anno);

[dennys]

It works, thanks.