Skip to content
This repository has been archived by the owner on Sep 6, 2024. It is now read-only.

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

Open
the-yaz opened this issue Nov 15, 2023 · 10 comments
Open

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

the-yaz opened this issue Nov 15, 2023 · 10 comments

Comments

@the-yaz
Copy link

the-yaz commented Nov 15, 2023 •
edited
Loading

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
Copy link
Member

rsimon commented Nov 15, 2023

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
Copy link
Author

the-yaz commented Nov 15, 2023

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 .

@the-yaz the-yaz changed the title Circle and eclipse selectors doesn't have a widget Circle and eclipse selectors don't have a widget Nov 15, 2023
@rsimon
Copy link
Member

rsimon commented Nov 15, 2023

Are any error messages showing up in the browser console?

@the-yaz
Copy link
Author

the-yaz commented Nov 15, 2023 •
edited
Loading

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
Copy link
Member

rsimon commented Nov 15, 2023

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
Copy link
Author

the-yaz commented Nov 20, 2023

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
Copy link
Member

rsimon commented Nov 20, 2023

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
Copy link
Author

the-yaz commented Nov 20, 2023

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

@rsimon
Copy link
Member

rsimon commented Nov 20, 2023

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
Copy link

Chiga2030 commented Dec 4, 2023 •
edited
Loading

@rsimon

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rsimon @Chiga2030 @the-yaz