Circle and eclipse selectors don't have a widget

the-yaz commented 1 year ago

I add the plugin of toolbar and selector pack , for the defaul selector rect and polygon they have the widget but the circle and eclipse selectors doesn't have it , how can I add it to them ? edit : in the basic example it work good but by adding anything to the anno init , the eclipse and circle stop having widget , right now i just tried to add formatter of shape label and it didn't work , always there is error n.reduce is not a function. here my code :

<html>
  <head>
    <!-- Annotorious first -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.css">

  </head>

  <body>
    <div id="my-toolbar-container"></div>
    <img id="hallstatt" src="640px-Hallstatt.jpg">
    <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.js"></script>
    <script src="annotorious-shape-labels.min.js"></script> 
    <!-- Selector Pack plugin -->
    <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-toolbar@latest/dist/annotorious-toolbar.min.js"></script>
    <script src="selector.js"></script>
    <script>

      window.onload = function() {
        // Init Annotorious

      var anno = Annotorious.init({
          image: 'hallstatt',
          formatter: Annotorious.ShapeLabelsFormatter()
      });

        // Init the plugin
        Annotorious.SelectorPack(anno);
        Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'));
        // [ 'rect', 'polygon', 'point', 'circle', 'ellipse', 'freehand' ]
        console.log(anno.listDrawingTools());

      }
    </script>
  </body>

rsimon commented 1 year ago

Not sure if this is a copy and paste error. But are you passing the undefined anno variable to the SelectorPack before you are initializing anno?

the-yaz commented 1 year ago

I tried to pass it after the init like this :

 var anno = Annotorious.init({
                image: 'hallstatt',
                widgets: [
                  ColorSelectorWidget

                ],
                formatter: ColorFormatter
              });
              Annotorious.SelectorPack(anno); 
              Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'));

but still circle and eclipse don't show any widget .

rsimon commented 1 year ago

Are any error messages showing up in the browser console?

the-yaz commented 1 year ago

yes there is this error for the circle:

Uncaught TypeError: n.reduce is not a function
    at _e (index.js:43:1)
    at new u (index.js:43:1)
    at a.createEditableShape (index.js:43:1)
    at AnnotationLayer.js:436:48
    at kS.emit (index.js:36:20)
    at ToolsRegistry.js:57:46
    at a.emit (index.js:43:1)
    at index.js:43:1
    at i.mouseUp (index.js:43:1)
_e @ index.js:43
u @ index.js:43
(anonymous) @ index.js:43
(anonymous) @ AnnotationLayer.js:436
emit @ index.js:36
(anonymous) @ ToolsRegistry.js:57
emit @ index.js:43
(anonymous) @ index.js:43
i.mouseUp @ index.js:43

and these ones for the eclipse

Error: <ellipse> attribute ry: Expected length, "undefined".
Ke @ index.js:43
Je @ index.js:43
e @ index.js:43
(anonymous) @ index.js:43
(anonymous) @ index.js:43
(anonymous) @ AnnotationLayer.js:161
index.js:43 Error: <ellipse> attribute ry: Expected length, "undefined".
Ke @ index.js:43
Je @ index.js:43
e @ index.js:43
(anonymous) @ index.js:43
(anonymous) @ index.js:43
(anonymous) @ AnnotationLayer.js:161
index.js:43 Error: <path> attribute d: Expected number, "…99 h-706 z M439 NaN a 2 NaN 0 1 …".

maybe i did mistake importing the scripts :

 <script type="text/javascript" src="annotorious.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-selector-pack@latest/dist/annotorious-selector-pack.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-toolbar@latest/dist/annotorious-toolbar.min.js"></script>

rsimon commented 1 year ago

Not sure - the same setup seems to be working fine. I just note that you seem to have two copies of annotorious.min.js imported - one from the CDN, and one from a local folder. Other possibility might be that something's off with your widget or formatter function. You could try disabling them, just to rule out that they don't interfere somehow.

the-yaz commented 12 months ago

you are right , even the formatter of the shape labels cause this promblem (the formatter work fine with rect and poly), the error always n.reduce not a function .

rsimon commented 12 months ago

I can't reproduce this behavior locally I'm afraid. Can you set up an online example so I can take a look?

the-yaz commented 12 months ago

here is an example with the same problem https://codepen.io/yaz11/pen/WNPMLWB

rsimon commented 12 months ago

Hm, not sure why this isn't working as it should & I don't have the time to look into the details right now. But it seems that the following workaround will work: provide an array of formatters as the formatter property. (The property should take both - a single formatter or an array. Not sure what the problem is.)

formatter: [Annotorious.ShapeLabelsFormatter()]

Chiga2030 commented 11 months ago

@rsimon

This error occurs in version 0.6.0. In version 0.5.1, the circle, ellipse and freeHand are drawn correctly.

annotorious / annotorious-v2-selector-pack

Circle and eclipse selectors don't have a widget #24