search

retejs / examples

26 stars 20 forks source link

Change component/node color #10

Closed borja010 closed 5 years ago

borja010 commented 5 years ago

Good afternoon,

Is there any way to change the component color or node color on real time in Angular?

Thank you in advance.

Ni55aN commented 5 years ago

Yes, use a custom Node.vue https://github.com/retejs/rete/issues/209#issuecomment-434406096 https://github.com/retejs/examples/issues/9#issuecomment-436433281

borja010 commented 5 years ago

Thank you for the quick response.

Im actually using rete-alight-render-plugin since the vue-render-plugin is not properly making the connections. By any chance do you know if there is a way with rete-alight-render-plugin or are you planning to update with the connections working properly?

Ni55aN commented 5 years ago

What exactly is wrong with the connection? Render plugins do not affect connections

borja010 commented 5 years ago

The connections are not matching.

image

Ni55aN commented 5 years ago

What version of rete-connection-plugin?

borja010 commented 5 years ago

Im using the same example that you uploaded. I just do a npm install and try it.

"rete": "^1.0.0-beta.5", "rete-connection-plugin": "^0.2.4", "rete-vue-render-plugin": "^0.2.4",

Ni55aN commented 5 years ago

You need the latest version of rete-connection-plugin (v0.3.1)

borja010 commented 5 years ago

I just tried with the latest version and it still the same. When you tried by yourself, is working properly? Are you trying it on chrome?

Ni55aN commented 5 years ago

Yes, just checked in Chrome 68. https://codepen.io/Ni55aN/pen/xzgQYq

I had a similar issue when SVG width and height are less than 12px. I still do not know exactly the reason for such strange behavior. Try to define the next styles:

svg.connection {
  width: auto;
  height: auto;
}
borja010 commented 5 years ago

I just tried now and its working like a charm.

Thank you very much for the assistance.

Is the example provided for Angular? Im trying to follow the information from https://github.com/retejs/vue-render-plugin and the example but I dont have access to this.data.render and the CustomNodeComponent.

Ni55aN commented 5 years ago

Is the example provided for Angular?

yes, in retejs/examples repo

borja010 commented 5 years ago

Good evening,

I was already able to create my own component and do the necessary changes. The only problem that I have right now is that everytime that I click a node, the canvas is created and it return the node to the initial status. How can I avoid this?

I removed this function:

editor.on('nodeselected', () => {
        editor.nodes.map(update);
    });

And now, there are some instances where the seleceted() get stuck on previous selected nodes.

Thank you for the help.

Ni55aN commented 5 years ago

the canvas is created and it return the node to the initial status

can you describe in detail?

borja010 commented 5 years ago

I was already able to fix it by adding a container in the creation of the personalized node. Thank you for the reply and the follow up. Ill be closing this issue since by being able to create my own node, it opens a lot of possibilities.