Can the editor support two or more mode buttons display as fly-out menu created in extension JS file

[GoogleCodeExporter]

Hello,

What steps will reproduce the problem?

I want to add two or more "mode" buttons and include with the left pencil tool 
button (ID: tool_fhpath), and I create an extension js file and code the two 
buttons there, after run the application, the JS error appears as the follows: 
TypeError: opts is undefined
flyout_funcs[opts.sel] = opts.fn;

However, if I remove either button code, everything works fine, I can click on 
the pencil tool and the flyout menu appears, I just cannot display the two 
buttons in one flyout menu.

here is code for the two buttons

 // Multiple buttons can be added in this array
        buttons: [
        {
            id: "tool_highlighter_red_slim",
            type: "mode",

            // Tooltip text
            title: "Red Slim Highlighter",

            // Events
            events: {
                'click': function () {

                    svgCanvas.setMode("fhpath");
                    svgCanvas.setColor('stroke', '#ff0000', true);
                    svgCanvas.setPaintOpacity('stroke', '1', true);
                    svgCanvas.setStrokeWidth('2');
                }
            },
            includeWith: {
                button: '#tool_fhpath'
            }
        }
         ,
                 {
                     id: "tool_highlighter_red_opacity",
                     type: "mode",

                     // Tooltip text
                     title: "Red OPA Highlighter",

                     // Events
                     events: {
                         'click': function () {
                            svgCanvas.setMode("fhpath");
                            svgCanvas.setPaintOpacity('stroke', '0.5', true);
                            svgCanvas.setStrokeWidth('5');
                         }
                     },
                     includeWith: {
                         button: '#tool_fhpath'
                     }
                 }
        ]

Any ideas? Thank you.

In what browser did you experience this problem? (ALL, Firefox, Opera, etc)
ALL

In what version of SVG-edit does the problem occur? (Latest trunk, 2.5.1,
etc)
Latest trunk

Original issue reported on code.google.com by cyfan9...@gmail.com on 6 Nov 2012 at 12:11

[GoogleCodeExporter]

I've been trying to do something similar.  This is with v2.6.

In my case, my extension has 2 mode buttons, both of which should be in the 
same flyout menu.

The line you mention that fails is in setupFlyouts() (about line 884).  
setupFlyouts() receives a dictionary.  One piece of the dictionary is the 
button options.  This seems to be an array.  When I add my first button, the 
button options array only contains Button A's options.  When setupFlyouts() is 
called a 2nd time for Button B (which should be in the same flyout as Button 
A), the button options array has been reversed and so there is no first 
element, only a second.

The relevant lines are from 1284 to 1304:

// Include data for extension button as well as ref button
var cur_h = holders['#'+flyout_holder[0].id] = [{
    sel: '#'+id,
    fn: btn.events.click,
    icon: btn.id,
    key: btn.key,
    isDefault: btn.includeWith?btn.includeWith.isDefault:0
 }, ref_data];

// {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: 
'#tools_rect', icon: 'rect'}

var pos  = ("position" in opts)?opts.position:'last';
var len = flyout_holder.children().length;

// Add at given position or end
if(!isNaN(pos) && pos >= 0 && pos < len) {
    flyout_holder.children().eq(pos).before(button);
} else {
    flyout_holder.append(button);
    cur_h.reverse();
}

The cur_h.reverse() line reverses the button array so that what used to be 
[object Object,] becomse [,object Object].  When setupFlyout() tries to get 
button options, it's trying from the first element of the button options array, 
which as you can see, is null.  If you look at the assignment of cur_h (and 
holders, which is what is actually passed to setupFlyout(), I think ref_data 
(the 2nd element in the array being created).  Might be null.  I believe v2.5.1 
had this same problem, but the code has changed so I have to see if my changes 
for v2.5.1 still would work for v2.6.  Since you didn't seem to get an answer, 
I assume it's still broken as opposed to not doing the extension correctly.

I will keep looking and post if I find out more.

Original comment by adamste...@gmail.com on 1 Feb 2013 at 5:22

[GoogleCodeExporter]

I have modified svg-editor.js (v2.6 version) to fix this problem.  I've 
attached a patch file (svg-editor.diffs).  Unless I'm really doing my plugin 
wrong (and I am following the online docs), there are issues with svg-editor.js 
that prevent a full flyout menu from being created by a user extension.

Assuming anybody even sees this and would like to know more about what I needed 
to change, let me know.  I added comments in the patched code to explain the 
new stuff.

Original comment by adamste...@gmail.com on 4 Feb 2013 at 1:35

Attachments:

• svg-editor.diffs

[GoogleCodeExporter]

Thanks for the patch. For me, it worked with 2 buttons, though not with 3 
buttons.

How many did you use?

Also, I'm still lost on what's wrong, even with your comments... *_*

Original comment by g...@hotmail.com on 16 Jul 2013 at 2:03

[GoogleCodeExporter]

Okay, I think the problem is at svg-editor.js lines 1206ff:

var cur_h = holders['#'+flyout_holder[0].id] = [{
  sel: '#'+id,
  fn: btn.events.click,
  icon: btn.id,
  key: btn.key,
  isDefault: btn.includeWith?btn.includeWith.isDefault:0
}, ref_data];

The newly created array in the "holders" map has only 2 items: the new button's 
data and the referenced "includeWith" button's data.

However, when calling the function "setupFlyouts(holders)" afterwards, it 
iterates over all buttons in the flyout and fetches the button data from the 
array by index, at line 875:

var opts = btn_opts[i];

If the flyout already contains 3 or more buttons, it will consequently run into 
a null pointer for the 3rd button, since the array contains only 2 items.

My solution was as follows:

1. Shift the block "Actions.appendButtonData(btn);" from Adam's patch 7 lines 
upwards, so that the button data is appended to the Actions list for all 
buttons.
2. Replace the faulty line "var opts = btn_opts[i];" with "var opts = 
Actions.getButtonData('#'+this.id);". That way, the button data is fetched from 
the Actions list by ID and the incomplete "holders" array is ignored.

This worked for me with 3 and more buttons.

If anyone is interested, I can supply a new patch.

Original comment by g...@hotmail.com on 17 Jul 2013 at 1:59

[GoogleCodeExporter]

Yes, could you supply a new patch with the current trunk version?

Trying to find out where to add those function but the code changed quite a lot 
since the first patch.

Thanks.

Original comment by fredo2...@gmail.com on 31 Oct 2013 at 6:36