I am not able to use vue-render-plugin. Am i doing something wrong?

Project example: (components/Editor/Editor.vue)

https://codesandbox.io/s/rete-test-cehn8

I am trying to use Vuetify.js components in my controls, but I've noticed a few weird issues. I'm not sure if this is a problem with this plugin, with Vuetify, or with my setup, but any advice would be appreciated.

Here is an example in CodePen: https://codepen.io/gollum999/pen/jONrRrj

The two primary issues I've noticed are:

1. Vuetify components inside of Rete nodes don't see certain global Vuetify theme settings, e.g. custom theme colors work fine, but dark mode toggle doesn't work.
2. Some Vuetify components don't work at all.

Issue 1 I can hack around on a case-by-case basis, but I haven't found a solution to issue 2 (aside from never using any of the "bad" components).

I think this is related to vuetifyjs/vuetify#5096, and by extension vuetifyjs/vuetify#4068 and vuejs/vue#8278... but I only do web stuff as a hobby so most of this went over my head. It sounds like this plugin is somehow getting a different instance of Vue that doesn't see the global Vuetify config? Or maybe this plugin isn't registering its Vue components in the way that Vuetify expects?

Again, I'm not really sure where to look here, so any help is appreciated.

I would change nodes in Angular app. I couldn't see custom component in https://stackblitz.com/edit/github-rete-vctacd?file=src/app/rete/custom-node.ts from issue retejs/rete#318

In my local app I recived error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'components')
TypeError: Cannot read properties of undefined (reading 'components')

My dependencies:

"rete": "^1.4.5",
"rete-angular-render-plugin": "^0.2.2",
"rete-area-plugin": "^0.2.1",
"rete-connection-plugin": "^0.9.0",
"rete-context-menu-plugin": "^0.6.0-rc.1",
"rete-vue-render-plugin": "^1.0.0-rc2",
"rxjs": "~6.6.0",
"vue": "^2.6.8",
"zone.js": "~0.10.2"

What version of vue is comparable with retejs lib? What code changes I must submit to stackblitz demo to make custom component functional?

Hi

I have been trying to use bootstrap-vue-3 and Retejs (latest version), with Vite. And while I can get to render the nodes (yay) and most of the system, I cannot get it to render the controls when using with bootstrap-vue-3 npm package.

I looked into the source code of the vue-render-plugin, and I am just theorising if each of the apps (from the createapp method) needs to use a ".use(boostrapvue3)" in them in order for the app to know to use bootstrap-vue-3. At the moment, it cannot resolve the components used in bootstrap vue 3 at all, and just renders the controls as pure text.

So my question is, is my theory in the right direction? And if so, I tried to build the plugin, but i get a bunch of errors (about it cannot import the dependencies, because of not recognising this as modules etc). I even tried to follow the rete CLI documentation, and that also gave me a bunch of errors. I am using nodejs version 16.

Is the rete CLI documentation still correct for creating a new plugin and building it? does it still work for other people doing the same steps?

[https://rete.js.org/#/cli#lang=en&tosearch=r]

edit:

I got it to work, but there was a missing part in the vue-render-plugin which did not do anything with the passed in options. I.e I could not do a "use([my passed in plugin])" for the vue app in the createcontrol method. I added that section to do this with the passed in options, and it could display bootstrap-vue-3 nicely.

I could still not get the rete CLI to work, but I am using a modified local version of the vue-render-plugin instead, which gives me what I need at the moment.

Support Vue 3?

HI

i just 'imported' one of the example available in the docs in my vue project| (typescript + VUE CLI 3).

Event is compiling correctly, at runtime I get a series of warning from vue:

[Vue warn]: Property or method "readonly" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

The result is that visually I see the node (with a textbox inside) but the textbox has no value (emtpy).

Seems that for VUE the component NumberControl.vue does not have the prop 'readyonly' and not have the data 'value' attr.

CODESANDBOX LINK: https://codesandbox.io/s/retejs-test-jw1rz

Here the source code:

NumberControl.vue

<template>
    <input type="number" :readonly="readonly" :style="{ backgroundColor: readonly ? `#555` : `white`, color: readonly ? `white` : `black`}" :value="value" @input="change($event)" @dblclick.stop="" @pointermove.stop="" />
</template>

<script lang="ts">
//@ts-ignore
import Vue, { VueConstructor } from 'vue';


export default Vue.extend(
{    
    props: [ 'readonly', 'emitter', 'ikey', 'getData', 'putData' ],

    data: () =>
    ({ 
        value: 0,
    }),

    methods: 
    {
        change(e: any)
        {
            this.value = +e.target.value;
            this.update();
        },

        update() 
        {
            if (this.ikey) this.putData(this.ikey, this.value)
            this.emitter.trigger('process');
        }
    },
    
    mounted() 
    {
        this.value = this.getData(this.ikey);
    }

})

Here the rest:

import Vue from 'vue';


import * as Rete from 'rete';
import VueRenderPlugin          from 'rete-vue-render-plugin';
import ConnectionPlugin         from 'rete-connection-plugin'; 
import ContextMenuPlugin        from 'rete-context-menu-plugin';
import AreaPlugin               from 'rete-area-plugin';
import CommentPlugin            from 'rete-comment-plugin';    
import HistoryPlugin            from 'rete-history-plugin';
//import ConnectionMasteryPlugin  from 'rete-connection-mastery-plugin';

import VueNumberControl from './NumberControl.vue';

let numSocket = new Rete.Socket('Number Value');

class NumControl extends Rete.Control 
{
    constructor(emitter, key, readonly = false) 
    {
        super(key);
        this.render    = 'vue';
        this.component = VueNumberControl;
        this.props     = { emitter, ikey: key, readonly };
    }

    setValue(val) 
    {
        this.vueContext.value = val;
    }
}

class NumComponent extends Rete.Component 
{

    constructor()
    {
        super("Number");
    }

    builder(node) 
    {
        var out1 = new Rete.Output('num', "Value", numSocket);

        return node.addControl(new NumControl(this.editor, 'num')).addOutput(out1);
    }

    worker(node, inputs, outputs) 
    {
        outputs['num'] = node.data.num;
    }
}

class MathComponent extends Rete.Component 
{
    doOperation(v1, v2) { return 0;  }

    builder(node) 
    {
        var inp1 = new Rete.Input('num1', "Value 1", numSocket);
        var inp2 = new Rete.Input('num2', "Value 2", numSocket);
        var out  = new Rete.Output('num', "Result",  numSocket);

        inp1.addControl(new NumControl(this.editor, 'num1'))
        inp2.addControl(new NumControl(this.editor, 'num2'))

        return node
            .addInput(inp1)
            .addInput(inp2)
            .addControl(new NumControl(this.editor, 'preview', true))
            .addOutput(out);
    }

    worker(node, inputs, outputs) 
    {
        var n1 = inputs['num1'].length ? inputs['num1'][0] : node.data.num1;
        var n2 = inputs['num2'].length ? inputs['num2'][0] : node.data.num2;
        var sum = this.doOperation(n1, n2);
        
        this.editor.nodes.find(n => n.id == node.id).controls.get('preview').setValue(sum);
        outputs['num'] = sum;
    }
}


class AddComponent      extends MathComponent { constructor()  { super('Add');      }  doOperation(v1, v2) { return v1 + v2; } }
class SubtractComponent extends MathComponent { constructor()  { super('Subtract'); }  doOperation(v1, v2) { return v1 - v2; } }
class MultiplyComponent extends MathComponent { constructor()  { super('Multiply'); }  doOperation(v1, v2) { return v1 * v2; } }
class DivideComponent   extends MathComponent { constructor()  { super('Divide'); }    doOperation(v1, v2) { return v2 != 0 ? v1 / v2 : 0; } }

export async function createFlowEditor()  
{
    console.log('createFlowEditor()');

    let container = document.querySelector('#my-flow-editor');
    let components = [new NumComponent(), new AddComponent(), new SubtractComponent(), new MultiplyComponent(), new DivideComponent()];
    
    let editor = new Rete.NodeEditor('[email protected]', container);
    editor.use(ConnectionPlugin);
    editor.use(VueRenderPlugin);
    editor.use(AreaPlugin);
    editor.use(CommentPlugin);
    editor.use(HistoryPlugin);
    //editor.use(ConnectionMasteryPlugin);

    editor.use(ContextMenuPlugin, 
    {
        searchBar: false,                
        items: 
        {
            'Dump JSON': () => { console.log(editor.toJSON()) }
        },
        allocate(component) { return ['+ New']; },
        rename(component)   { return component.name; },      
    });

    let engine = new Rete.Engine('[email protected]');
    
    components.map(c => 
    {
        editor.register(c);
        engine.register(c);
    });

    let n1  = await components[0].createNode({num: 2});
    //let n2  = await components[0].createNode({num: 0});
    //let add = await components[1].createNode();

    n1.position  = [80, 200];
    //n2.position  = [80, 400];
    //add.position = [500, 240];
 

    editor.addNode(n1);
    //editor.addNode(n2);
    //editor.addNode(add);

    //editor.connect(n1.outputs.get('num'), add.inputs.get('num1'));
    //editor.connect(n2.outputs.get('num'), add.inputs.get('num2'));


    editor.on('process nodecreated noderemoved connectioncreated connectionremoved', async () => 
    {
        console.log('processing...');
        await engine.abort();
        await engine.process(editor.toJSON());
    });

    // editor.on('nodedraged', async (node) => 
    // {
    //     console.log('node dragged', node);     
    //     let grid = 10; 
    //     node.position[0] = Math.floor(node.position[0] / grid) * grid;
    //     node.position[1] = Math.floor(node.position[1] / grid) * grid;
    // });      

    editor.view.resize();
    AreaPlugin.zoomAt(editor);
    editor.trigger('process');
};

here the packages.json file

{
  "name": "etna-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build:app": "vue-cli-service build --dest dist/app      src/main.ts",
    "build:dataview": "vue-cli-service build --dest dist/dataview src/etna/views/dataview/build.ts",
    "test:unit": "vue-cli-service test:unit",
    "test:watch": "vue-cli-service test:unit --watch"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "@fortawesome/fontawesome-free": "^5.9.0",
    "date-fns": "^1.30.1",
    "fontfaceobserver": "^2.1.0",
    "fps-indicator": "^1.3.0",
    "leaflet": "^1.5.1",
    "lodash": "^4.17.11",
    "rete": "^1.3.1-rc.3",
    "rete-area-plugin": "^0.2.1",
    "rete-comment-plugin": "^0.5.1",
    "rete-connection-mastery-plugin": "^0.1.0",
    "rete-connection-plugin": "^0.8.0",
    "rete-context-menu-plugin": "^0.4.0",
    "rete-history-plugin": "^0.2.1",
    "rete-vue-render-plugin": "^0.4.0",
    "roboto-fontface": "*",
    "vis": "^4.21.0",
    "vue": "^2.6.10",
    "vue-canvas-gauges": "0.0.0",
    "vue-color": "^2.7.0",
    "vue-dialog-drag": "^0.1.29",
    "vue-graph-vis": "^0.1.4",
    "vue-grid-layout": "^2.3.4",
    "vue-multipane": "^0.9.5",
    "vue-router": "^3.0.6",
    "vue2-leaflet": "^2.1.1",
    "vuetify": "^1.5.14",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@types/chai": "^4.1.0",
    "@types/leaflet": "^1.4.4",
    "@types/lodash": "^4.14.134",
    "@types/mocha": "^5.2.7",
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-typescript": "^3.8.1",
    "@vue/cli-plugin-unit-mocha": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "@vue/test-utils": "^1.0.0-beta.29",
    "chai": "^4.1.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.0.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "typescript": "^3.5.1",
    "vue-cli-plugin-vuetify": "^0.4.6",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  }
}

• rete v1.4.2
• rete-vue-render-plugin v0.5.0

https://codepen.io/Ni55aN/pen/EGZOdK

Could you provide examples of the following components?
import CustomNodeComponent from './CustomNodeComponent.vue';
import CustomControlComponent from './CustomControlComponent.vue';

var CustomNode = {
    template: `<div class="node" :class="[selected(), node.name] | kebab">
  <!--- hide title <div class="title">{{node.name}}</div> -->
  <!-- Outputs-->
  <div class="output" v-for="output in outputs()" :key="output.key">
    <div class="output-title">{{output.name}}</div>
    <Socket v-socket:output="output" type="output" :socket="output.socket"></Socket>
  </div>
  <!-- Controls-->
  <div class="control" v-for="control in controls()" v-control="control"></div>
  <!-- Inputs-->
  <div class="input" v-for="input in inputs()" :key="input.key">
    <Socket v-socket:input="input" type="input" :socket="input.socket"></Socket>
    <div class="input-title" v-show="!input.showControl()">{{input.name}}</div>
    <div class="input-control" v-show="input.showControl()" v-control="input.control"></div>
  </div>
</div>`,
    mixins: [VueRenderPlugin.mixin],
    components: {
        Socket: VueRenderPlugin.Socket
    }
}

editor.use(VueRenderPlugin, {
    component: CustomNode
});

Hello,

I try to use this 2 exemples with latest versions of rete.js et vue-render-plugin :

https://codepen.io/Ni55aN/pen/EGZOdK
https://codepen.io/Ni55aN/pen/GGrzYE

But its not work if i change the version of vue-render-plugin (0.2.6 to 0.5.0) .

In codepen.io exemple (Rete.js Node Editor UE4 Style) i change just the version of rete.js and vue-render-plugin in Add External Scripts/Pens :
https://cdn.jsdelivr.net/npm/[email protected]/build/vue-render-plugin.min.js
to
https://cdn.jsdelivr.net/npm/[email protected]/build/vue-render-plugin.min.js

https://cdn.jsdelivr.net/npm/[email protected]/build/rete.min.js
to
https://cdn.jsdelivr.net/npm/[email protected]/build/rete.min.js

and change :
editor.use(VueRenderPlugin);
to
editor.use(VueRenderPlugin.default);
(line 121)

After that i have this error :
TypeError: Cannot read property 'props' of undefined

If i add in the constructor these lines it's the same result :
class AddComponent extends Rete.Component {
constructor(){
super("Add");
this.data.render = 'vue';
this.data.component = CustomNode;
this.data.props = {};
}
...

I want use custom node with pure html, js and css. And this exemples are perfect for me.

Can you help me for use the latest version of vue-render-plugin with html template ? Why i have this error ?

Thanks.
@+

HI

I found incorrect rendering when using bootstrap grid

Versions:
rete: 1.4.4
rete-vue-render-plugin: 0.5.0
bootstrap: 4.5.2
vue: 2.6.10

Source: https://codepen.io/pavlmais/pen/gOroNPx

It starts to work correctly when disabling position: relative in col bootstrap style

Overloading the col style does not help

Hello!

I'm using nuxt with SSR.

When you import the library, crash:
document is not defined

Error in node_modules/rete-vue-render-plugin/build/vue-render-plugin.common.js

Line 244: var HEAD = document.head || document.getElementsByTagName('head')[0];

It is possible to add SSR support.

Thanks and regards

In socket.vue

:title="socket.name+'\n'+socket.hint" - always undefined
Зачем нужна эта переменная, она нигде не объявляется и не используется.

Hi, I'd like to Popup a modal form when a node is double-clicked. Then pass form payload back to the node. Can you show me how to do it on Vue? Thanks!

I am getting the following error while trying to use rete with nuxt:

[Vue warn]: Failed to resolve async component: function rete() {
      return Promise.all(/*! import() */[__webpack_require__.e("vendors/components/rete"), __webpack_require__.e("components/rete")]).then(__webpack_require__.bind(null, /*! @/components/rete.vue */ "./components/rete.vue"));
    }
Reason: TypeError: Object(...) is not a function

I basically followed these issues: #20

There seem to be other people with this issue but they managed to resolve it "magically":
#44
#43

The page I want to use rete in:

<template>
  <div>
    <client-only>
      <rete />
    </client-only>
  </div>
</template>

<script>
export default {
  name: "CodingVue",
  components: {
    rete: () => import("@/components/rete.vue"),
  },
};
</script>

<style scoped></style>

The rete component:

<template>
  <div id="rete"></div>
</template>

<script>
// import "regenerator-runtime";
import Rete from "rete";
import ConnectionPlugin from "rete-connection-plugin";
import VueRenderPlugin from "rete-vue-render-plugin";
import ContextMenuPlugin from "rete-context-menu-plugin";
import AreaPlugin from "rete-area-plugin";

export default {
  data() {
    return {
      editor: null,
    };
  },
  async mounted() {
    const container = document.querySelector("#rete");

    this.editor = new Rete.NodeEditor("[email protected]", container);
    this.editor.use(VueRenderPlugin);
    this.editor.use(ConnectionPlugin, { curvature: 0.4 });
    this.editor.use(ContextMenuPlugin);
    this.editor.use(AreaPlugin, {
      background: false,
      scaleExtent: { min: 0.5, max: 1.5 },
    });
    this.editor.trigger("process");
  },
};
</script>

<style scoped>
#rete {
  background: blue;
  width: 300px;
  height: 300px;
}
</style>

This thread is intended for discussing Vue 3 support

At the moment, all changes regarding the third version are in vue3 branch.
Also published v1.0.0-rc1, but it needs testing and possibly some improvements

Hello,

I'm struggling a bit with control creation: I think there is something obvious I have been missing for 2 hours....
I have these pieces of sample code:

class MyControl extends Rete.Control {
    constructor(emitter: NodeEditor, key: string) {
        super(key);

        // @ts-ignore
        this.render = 'vue';
        // @ts-ignore
        this.component = {
            template: '<div>Hello template</div>',
            mounted() {
                console.log('mounted', this.$el);
            },
        };
    }
}

and in my component:

async builder(node: Node) {
        const input1= new Rete.Input('in1', 'in1', mySocket);
        input1.addControl(new MyControl (this.editor!, 'in1'));
        node.addInput(input1);
    }

editor is initialized with:
editor.use(VueRenderPlugin)

And during runtime the console output (from mounted vue hook):

and indeed, in devtools I can only see:

The packages I'm using are:

    "rete": "^1.4.5",
    "rete-connection-plugin": "^0.9.0",
    "rete-vue-render-plugin": "^0.5.1",

Am I doing something wrong here ?

I'm not within a Vuejs application (vanillajs), so no direct reference to vue, but I was expecting the vue plugin to use the one used by rete himself. Is this asumption true ?

... sorry for my average english...

Сreate test vue2 app with rete-kit - everything is fine, compiles and works.

But

Clone vue-plugin (install/build), add plugin as local dep ("rete-vue-plugin": "file:../vue-plugin/dist"), install/run - tonns of compile error like

108 > | area.use(vueRender);
| ^^^^^^^^^
109 | area.use(connection);
110 | area.use(contextMenu);
111 |

error in src/rete/perf.ts:38:12

TS2345: Argument of type 'VuePlugin<Schemes, AreaExtra>' is not assignable to parameter of type 'Scope<any, any[]>'.
The types of 'use(...).debug' are incompatible between these types.
Type '<T extends FilterNever<GetAllNonValidElements<UnionToTuple<S["__scope"]["parents"][number]>, AreaExtra | Produces | Requires>>>(f: (p: { [K in keyof T]: AreaExtra | ... 1 m
ore ... | Requires<...>; }) => T) => void' is not assignable to type '<T extends FilterNever<GetAllN
onValidElements<UnionToTuple<S["__scope"]["parents"][number]>, any>>>(f: (p: { [K in keyof T]: any;
}) => T) => void'.
Types of parameters 'f' and 'f' are incompatible.
...

App's router does not pass into new Vue instance.

https://codepen.io/hatead1/pen/aXgjQp?editors=0110

Zoom view, look at dropdown font size at the different scale.
Когда меняется масштаб экрана, не меняется размер фонта выпадающего списка.

I install plagin and in the file editor.js just imported this plugin and wrote editor.use(VueRenderPlugin).
Why I have this error: TypeError: Object(...) is not a function?

HI, hope you can help.

I am trying to build this project but get the following error after cloning and building after npm i:

$ npm run build

[email protected] build C:_git\vue-render-plugin
rete --build rete.config.js

Error when using sourcemap for reporting an error: Can't resolve original location of error.
(node:6484) UnhandledPromiseRejectionWarning: Error: 'default' is not exported by node_modules\vue-runtime-helpers\dist\normalize-component.js
at error (C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:3356:15)
at Module.error (C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:13140:9)
at handleMissingExport (C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:12612:21)
at Module.traceVariable (C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:13246:17)
at ModuleScope.findVariable (C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:12404:29)
at Identifier$$1.bind (C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:9586:40)
at CallExpression.NodeBase.bind (C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:9106:23)
at CallExpression.bind (C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:10162:31)
at ExportDefaultDeclaration$$1.NodeBase.bind (C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:9106:23)
at ExportDefaultDeclaration$$1.bind (C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:9760:31)
at Program.NodeBase.bind (C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:9102:31)
at Module.bindReferences (C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:13094:18)
at Graph.link (C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:20738:20)
at C:_git\vue-render-plugin\node_modules\rollup\dist\rollup.js:20833:19
at processTicksAndRejections (internal/process/next_tick.js:81:5)
at process.runNextTicks [as _tickCallback] (internal/process/next_tick.js:51:3)
(node:6484) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not
handled with .catch(). (rejection id: 1)
(node:6484) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

It's imported from src/index.js and exported as part of the module, however I do not find any references to mixin anywhere in https://github.com/retejs/rete/blob/6bdec4f575e7ba5690fe673a6547270863b5013a/src/core/context.ts#L24 or any other files in the rete repo.

Thank you!

Hello I would like to be able to cut the connection from a CustomConnection Vue Component.
If I understand correctly I have to trigger a "connectionremove" event but "emit" is not present in a CustomConnection component.
Is there another way?

Thank you.

I am trying to implement rete as part of a larger project, where the 'input' class is already used and cannot be changed. Therefore it would be nice to have configurable class names for the sockets. I am hardcoding a change in my fork for now, if I find a proper solution I might send a PR!

All the best (and nice work on this project!).

Will be vue 3 support?

I'm trying to build a node which can dynamically update and remove outputs. According to the documentation this should be possible by simply calling addOutput and removeOutput, followed by a call to area.update("node", node.id), but this does not work. The outputs on the node never change.

Library versions used:

"rete": "^2.0.0-beta.6",
"rete-area-plugin": "^2.0.0-beta.9",
"rete-connection-plugin": "^2.0.0-beta.9",
"rete-context-menu-plugin": "^2.0.0-beta.6",
"rete-engine": "^2.0.0-beta.7",
"rete-render-utils": "^2.0.0-beta.9",
"rete-vue-render-plugin": "^2.0.0-beta.11",
"vue": "^3.2.47",

Now all the components within retejs vue-render-plugin are rendered separately as their own vue instances. This disables the option to have a global Vuex store for example, maybe for now it can be imported per component, I don't know.

It would be useful in general to be able to globally define the Vue plugins in the options for example to use them over all components created throughout rete.

It seems the vue plugin renders some incorect stuff to the html markup.
For custom control it renders some emit and data tags with some strange text.
For input and output node it is the same.

This issue only happens with versions from 2.0.1 to 2.0.4. In version 2.0.0 their was no such issue.

<div data-v-cc6bc301="" emit="function () { [native code] }" data="[object Object]" class="control" data-testid="control-input" data-v-app="">
   <input data-v-a4adbbb3="" type="number" seed="0.22975907885377467">
</div>

<div data-v-cc6bc301="" class="output" data-testid="output-a">
   <div data-v-cc6bc301="" class="output-title" data-testid="output-title"></div>
   <div data-v-cc6bc301="" data="[object Object]" emit="function () { [native code] }" class="output-socket" data-testid="output-socket" data-v-app="">
      <div data-v-4a0a4b7f="" class="socket" title="socket" seed="0.9482170948208757"></div>
   </div>
</div>

example with [email protected] (reproduces the bug with rendering the data and emit attributes)
https://codesandbox.io/s/rete-js-v2-vue-js-custom-controls-forked-ny25jg

example with [email protected] (without bug, official example: https://retejs.org/examples/controls/vue)
https://codesandbox.io/s/rete-js-v2-vue-js-custom-controls-qrdo2c?from-embed

Hey there!

We have an app where we're using custom Vue nodes and rendering by passing Rete a ref to a div element but we're running into a little bit of a hiccup that seems to be caused by the way the Vue nodes, connections, and sockets are mounted. They successfully mount and Rete renders correctly but it seems these nodes, connections, and sockets are never cleaned up by Rete no matter which Rete lifecycle events I fire. Currently, in onBeforeUnmount, I'm firing a destroy method that I return in our Rete instance that fires two Rete cleanup methods:

    destroy: async () => {
      await editor.clear()
      area.destroy()
    },

Unfortunately, neither of these seem to remove the Vue apps that are mounted during the initial render of Rete.

TL;DR The behavior I'd expect is that these Vue apps are unmounted when Rete is unmounted but that doesn't seem to be the case.

Additional Info

We're using the standard Rete config for custom Vue components as far as I can tell:

  render.addPreset(
    Presets.classic.setup({
      customize: {
        node() {
          return IssueVisualizationNode
        },
        connection() {
          return IssueVisualizationConnection
        },
        socket() {
          return IssueVisualizationSocket
        },
      },
    }),
  )

One thing that could be impacting this is how we create our nodes and links so to share, we are creating them in this code block dynamically using an API response:

  const nodesById: { [key: string]: Node } = {}

  // We build out each individual node and set a reference to each in nodesById
  // for when we build out the connections in the following loop
  const nodeRequests = props.data.nodes.map((node: { id: number }) => {
    const nodeId = `${node.id}`
    const newNode = createNode(nodeId, socket)
    newNode.customAttributes = { ...node }
    nodesById[nodeId] = newNode

    return editor.addNode(newNode)
  })

  // Await all node requests to resolve before proceeding to building connections
  await Promise.all(nodeRequests)

  // Build out connections - the lines between nodes in the visualization
  const connectionRequests = props.data.links.map((link: { from: number; to: number }) => {
    const { from, to } = link
    const fromNode = nodesById[from]
    const toNode = nodesById[to]

    const connection = new ClassicPreset.Connection(
      fromNode as ClassicPreset.Node,
      'port',
      toNode as ClassicPreset.Node,
      'port',
    ) as Connection

    // Bind all connection (aka link) data for consumption in the connection component
    connection.linkAttributes = link

    return editor.addConnection(connection)
  })

  await Promise.all(connectionRequests)

Trying to use it with typescript and compiler gives error:

Could not find a declaration file for module 'rete-vue-render-plugin'.

.

Вітаю!

I'm having an issue using @click event subscribers on components or html elements inside components, which are passed to vue renderer to override default appearance.

click event is just not firing. However, mousedown is.

It can be reproduced using html button in docs example.

<button type="button" @click="handleClick" @mousedown="handleClick">click me!</button>

and

    handleClick() {
      alert('click!');
    },

Is it a bug, or it was made purposely and should I try to find a workaround here?

Дякую! ❤️

Hi !

I'm trying to set up simple webpage with nodeEditor using Vue ( to which I'm complete beginner). I have set-up some app using examples from rete.js.org in which nodeEditor is created inside Vue component. In principle editor works and I can create Num nodes, but the sockets are missing. Console shows an error:

[Vue warn]: Error in render: "TypeError: _vm.socket is undefined"

found in

---> <Socket>
       <Anonymous>
         <Root>

I know it is not much info to replicate the problem, but maybe someone more experienced will exactly know what happens - I looked through all resources and found no clues :( especially that when I start app from rete.js.org repo editors are working fine.

Best,

Just doing import VueRenderPlugin from 'rete-vue-render-plugin'
is throwing the error
TypeError: Object(...) is not a function at eval (vue-render-plugin.esm.js?f261:136) at Module../node_modules/rete-vue-render-plugin/build/vue-render-plugin.esm.js (1.js:8149) at __webpack_require__ (app.js:854) at fn (app.js:151) at eval (blueprintEditor.js:26) at Module../src/views/blueprints/js/blueprintEditor.js (1.js:8362) at __webpack_require__ (app.js:854) at fn (app.js:151) at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/blueprints/blueprintsRoot.vue?vue&type=script&lang=js&:2) at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/blueprints/blueprintsRoot.vue?vue&type=script&lang=js& (1.js:178)

Hi, there seems to be no licensing information attached to this repo, please could you add a license spec?
(I'm sort of assuming MIT but ...)

I built an application on a slightly older version of the v2 render plugin, which now broke after updating everything to the latest versions.

The offending lines are the following (excerpt):

class TextBlockNode extends ClassicPreset.Node<
	{ textIn: ClassicPreset.Socket }, 
	{ textOut: ClassicPreset.Socket }
> { ... }

class BranchNode extends ClassicPreset.Node<
	{ textIn: ClassicPreset.Socket }, 
	Record<string, ClassicPreset.Socket>
> { ... }

class StartNode extends ClassicPreset.Node<
	{}, 
	{ textOut: ClassicPreset.Socket }
> { ... }

class OutputNode extends ClassicPreset.Node<
	{ textIn: ClassicPreset.Socket }, 
	{}
> { ... }

type Schemes = GetSchemes<
  TextBlockNode | StartNode | OutputNode | BranchNode,
  ClassicPreset.Connection<ClassicPreset.Node, ClassicPreset.Node>
>;
type AreaExtra = VueArea2D<Schemes>;

area = new AreaPlugin<Schemes, AreaExtra>(container);
const render = new VueRenderPlugin<Schemes>();

// error occurs in these lines:
render.addPreset(Presets.classic.setup<Schemes, AreaExtra>({
	area,
	customize: {
		node(context) {
			if (context.payload instanceof TextBlockNode) {
				return TextBlockNodeVue;
			}
			if (context.payload instanceof BranchNode) {
				return BranchNodeVue;
			}
			return CustomNode;
		},
		socket() {
			return CustomSocket;
		},
		connection() {
			return CustomConnection;
		},
	}
}));

All of the Custom* classes are imported from different Vue files. This code worked without issues before, but I think 31711fa might have broken it. Unfortunately I can't figure out how to get it working again.

Used library versions:

"rete": "^2.0.0-beta.9",
"rete-area-plugin": "^2.0.0-beta.12",
"rete-connection-plugin": "^2.0.0-beta.17",
"rete-engine": "^2.0.0-beta.7",
"rete-minimap-plugin": "^2.0.0-beta.5",
"rete-render-utils": "^2.0.0-beta.13",
"rete-vue-render-plugin": "^2.0.0-beta.24",

How can I set the following option in the config?
Vue.config.ignoredElements

It is necessary for using webcomponents inside vue components https://vuejs.org/v2/api/#ignoredElements

The example preset at https://retejs.org/examples/controls/vue is enough to reproduce this issue (vue2). In particular, the following section of file editor.ts is relevant:

render.addPreset(
    Presets.classic.setup({
      customize: {
        control(data) {
          if (data.payload instanceof ButtonControl) {
            return CustomButton;
          }
          if (data.payload instanceof ProgressControl) {
            return CustomProgress;
          }
          if (data.payload instanceof ClassicPreset.InputControl) {
            return Presets.classic.Control;
          }
        }
      }
    })
  );

When trying to use a custom preset for a control object, the following error is shown by VSCode, on the definition of the control function:

Property 'data' is missing in type 'Record<string, any>' but required in type '{ data: N; }'.

From what I understand, the error indicates that the Control returned by the control function does not have the "data" property. However, this is not the case, as all controls return it. In addition, if we modify the code to always return the Presets.classic.Control control, the same error is raised. The modified code looks as follows:

  render.addPreset(
    Presets.classic.setup({
      customize: {
        control(data) {
          return Presets.classic.Control;
        }
      }
    })
  );

As the component has the data property, I tried ignoring it by setting "strictFunctionTypes" to false in the tsconfig.json file, the following errors are shown in the browser console:

vue.runtime.esm.js:4605 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'type')"

found in

---> <Control> at /home/runner/work/vue-plugin/vue-plugin/src/presets/classic/components/Control.vue
       <Root>

vue.runtime.esm.js:3049 TypeError: Cannot read properties of null (reading 'type')
    at Proxy.render (rete-vue-plugin.esm.js:282:1)
    at Vue._render (vue.runtime.esm.js:2684:1)
    at VueComponent.updateComponent (vue.runtime.esm.js:3875:1)
    at Watcher.get (vue.runtime.esm.js:3446:1)
    at new Watcher (vue.runtime.esm.js:3436:1)
    at mountComponent (vue.runtime.esm.js:3892:1)
    at Vue.$mount (vue.runtime.esm.js:8772:1)
    at init (vue.runtime.esm.js:4407:1)
    at createComponent (vue.runtime.esm.js:6567:1)
    at createElm (vue.runtime.esm.js:6521:1)

Can this error be solved on my end, or is it related to something related to internal behaviors of the library itself?