Dynamic outputs with Module Plugin

[limuyao]

Hi Ni55aN ! Thank you for the awesome lib! I have a problem with a Module plugin. Maybe you can help me.

I create a Module node. Open the module (that links to the module node) and edit the content of the module (add some Inputs and Outputs). And when i return to the main schema, the Module node dynamicly adds inputs and outpus to itself. Inputs of the Module node works good, but Outputs not. When i try to connect a socket of one of Outputs to an other socket of an other node, the connection line is appears but it can't connect to any other socket =( When i manualy create an Output in a builder method of ModuleComponent class it works. But the dynamicly created outputs don't work.

the code of creating ModuleComponent:

class ModuleComponent extends Rete.Component {
    constructor(){
        super("Module");
        this.module = {
            nodeType: 'module'
        };

        this.render = 'vue';
        this.data.component = BaseNode; 
        this.data.props = {};
    }

    builder(node) {
        node.data.module = 'mod'+node.id;

        this.updateModuleSockets(node);
        node.update();

        return node            
    }

    change(node, item) {
        node.data.module = item;
        this.editor.trigger('process');
    }
}

the code of creating OutputComponent:

class OutputComponent extends Rete.Component {
    constructor(){
        super("Output");
        this.module = {
            nodeType: 'output',
            socket: numSocket
        };

        this.render = 'vue';
        this.data.component = BaseNode; 
        this.data.props = {}; // 
    }

    builder(node) {

        let inp  = new Rete.Input('input', "input", numSocket);
        node.data.name = 'in'+node.id;

        return node
            .addInput(inp)

    }
}

Thank you for any kind of help

[Ni55aN]

the connection line is appears but it can't connect to any other socket =(

Does the line follow the mouse cursor? Is there any errors in console?

[limuyao]

Yes, it follows the mouse cursor, but the connection line style seems like an Input connection style: Normal Output connection line style: Dinamicly added Output connection line style:

and there is't any errors in console =(

[limuyao]

I've created github repo with a sample code https://github.com/limuyao/modulesBug

it's just a modified your example of Modules (https://codepen.io/Ni55aN/pen/QOEbEW) but maked with Vue.js rendering. So you can explore the problem of Module outputs

[Ni55aN]

I know this problem. rete.esm.js is included in the bundle twice. I'll fix it

In details, there is rete dependency with version 1.4.2 in your project, and rete-module-plugin that has dependency rete (v1.3.0, for example). Since 1.3.0 and 1.4.2 have difference minor/major component, the first one will be installed as a different package.

https://stackoverflow.com/a/28855281/3853903 https://nodejs.org/en/blog/npm/peer-dependencies/

So, this was my mistake, that it is a direct dependency, not a peer dependency

In this case, instanceof Input in the rete-connection-plugin not working as expected since Input created by module plugin and other is not the same class in memory

[Ni55aN]

Fixed in v0.3.1

[limuyao]

Thank you for explanation, Ni55aN!