Uncaught TypeError: Object #<SVGAnimatedString> has no method 'indexOf'

[lrecknagel]

I try to use Leapstrap / Leap-Curser.js to control parallel coordinates from d3.js. But I found out that svg elements not supported by this framework. Is there any possibility to handle this? I really like the library but I really need svg support.

[wilkesalex]

Hi there,

SVG is a good point. There is no support for it in Leap Cursor. Probably your stuff (d3.js) is looking for mouse events. You need to manipulate the d3 plugin to look for leap events. Did you try and put the leap-interactive class on the container of the SVG?

cheers alex

[lrecknagel]

Yeah I put the leap-interactive class into my svg tag but the same warning appears. I think It´s hard to transform d3.js from svg to anything else. So do you have an idea to add svg support to your framework. I´m not really experienced in programming frameworks :/

[wilkesalex]

Oh, you're getting a warning? What does it say? Can you screenshot or copy the code etc?

I'm not experienced with SVG i'm afraid and I think SVG has additional interaction - I think your browser probably handles the SVG interaction, not the HTML. I can't look into that much I'm afraid, sorry :(

[lrecknagel]

The New.js File is your leapstrap framework, only renamed for testing. So I tried to convert your basic-grab example from leap-cursor.js to an svg square. I can grab --- transform and release it. But then the error occures. I´ve attached a screenshot with these issue and with my parallel coordinates from d3.js.

[lrecknagel]

Heyo,

I´ve now tried the Mouse-simulator demo but there is this error multiple times:

Uncaught TypeError: Cannot read property '12' of undefined leap-manager.js:831 Uncaught TypeError: Cannot read property '7' of undefined leap-manager.js:831 Uncaught TypeError: Cannot read property '12' of undefined leap-manager.js:831 Uncaught TypeError: Cannot read property '19' of undefined leap-manager.js:831

in the leap-manager.js this is the error creating codeblock:

CursorManager.prototype = {
    cursorContainer: null,
    elementLookup: {},
    mouseEvent: null,
    interactiveSelector: "",
    cursorLookup: {},
    isHoverTapEnabled:function(){
        return this.enableHoverTap === true;
    },
    isPressDownEnabled: function() {
        return this.enablePressDown === true;
    },
    getPressThreshold: function() {
        return this.pressThreshold || 0;
    },
    get: function(source, id, type) {
        if(type == null) type = "real";
        LeapManagerUtils.createStructure(this.cursorLookup, [type, source]);
        return this.cursorLookup[type][source][id];
    },
    add: function(cursor) {
        var type = cursor.type || "real";
        var source = cursor.source || "default";
        var id = cursor.id || 0;
        LeapManagerUtils.createStructure(this.cursorLookup, [type, source]);

        if(!LeapManagerUtils.exists(this.cursorLookup[type][source][id])) {
            this.cursorLookup[type][source][id] = cursor;
            this.cursorContainer.appendChild(cursor.icon);
            cursor.icon.addClass(this.leapCursorClass);
            cursor.setManager(this);
            cursor.onAdded();
            return cursor;
        }else {
            return this.cursorLookup[type][source][id];
        }
    },

So maybe you have a fast fix for this issue?!

[wilkesalex]

Hey man, I'm sorry, I don't have a fix for SVG and d3 stuff.