Multiple instances of annotator

[victoryhb]

The current implementation doesn't allow more than one instance of the annotator to be used on the same page. If more than one annotator is initialized, only the last one will work and earlier ones will report "Uncaught TypeError: Cannot set property 'attributes' of null" (in annotator_ui.js).

[Renaud009]

Can you provide a sample of code for this? Did you make a new instances of visualizer with a new html container as well?

In the end (and that's related to issue https://github.com/crim-ca/brat-frontend-editor/issues/2) I expect to be able to use this library by importing the npm package in the app with something like import { BratFrontendEditor } from 'brat-frontend-editor' var editor = new BratFrontendEditor(container, collData, docData, webFonts, options like width and heigth, etc.);

The library should resolves its dependencies by itself as well as his instances integrity.

[victoryhb]

Yes, I created another instance of the visualizer. It seems that the annotator is somehow coupled with certain HTML elements. Using the code in index.html as an example:

            dispatcher = new Dispatcher();
            var ajax = new LocalAjax(dispatcher);
            visualizer = new Visualizer(dispatcher, 'svg');
            var svg = visualizer.svg;
            var visualizerUI = new VisualizerUI(dispatcher, svg);
            var annotatorUI = new AnnotatorUI(dispatcher, svg);
            var spinner = new Spinner(dispatcher, '#spinner');
            //var logger = new AnnotationLog(dispatcher);
            dispatcher.post('init');

            docData.collection = null;
            dispatcher.post('collectionLoaded', [collData]);
            dispatcher.post('requestRenderData', [docData]);
            dispatcher.post('current', [collData, docData, {}]);

            // second instance
            dispatcher = new Dispatcher();
            var ajax = new LocalAjax(dispatcher);
            visualizer2 = new Visualizer(dispatcher, 'svg2');
            var svg = visualizer.svg;
            var visualizerUI = new VisualizerUI(dispatcher, svg);
            var annotatorUI = new AnnotatorUI(dispatcher, svg);
            dispatcher.post('init');

            docData2 = $.extend(true, {}, docData);  // deep copy
            collData2 = $.extend(true, {}, collData); 
            docData.collection = null;
            dispatcher.post('collectionLoaded', [collData2]);
            dispatcher.post('requestRenderData', [docData2]);
            dispatcher.post('current', [collData2, docData2, {}]);

If this bug is solved, it's one step closer to fulfilling your vision.

[404area]

In the single page application built by Vue、React 、Ng2，use this library by importing the npm package in the app Can't solve this problem。

Only windows Onload() solve this problem，but in spa I don't want to do it, because this will greatly affect the experience.