Chaning the shape of a node

[pswin]

First of all, I need to say thanks for your great library. It helped me a lot.

How can I change the shape of a node? (I need nodes with different shapes in my implementation. How can I do that?)

and how can I remove the title of a node?

[Ni55aN]

https://github.com/retejs/rete/issues/209#issuecomment-434406096

Please create issue in related repo: https://github.com/retejs/rete/issues

[Ni55aN]

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

1. Create Vue component (Single file component for building with Webpack is more preferable)

var CustomNode = { template: `

{{output.name}}

{{input.name}}

`, mixins: [VueRenderPlugin.mixin], components: { Socket: VueRenderPlugin.Socket } }

2. Add styles

```sass
$node-color: rgba(110,136,255,0.8)
$node-color-selected: #ffd92c
$group-color: rgba(15,80,255,0.2)
$group-handler-size: 40px
$group-handler-offset: -10px
$socket-size: 24px
$socket-margin: 6px
$socket-color: #96b38a
$node-width: 180px

.node
  background: $node-color
  border: 2px solid #4e58bf
  border-radius: 30% // changed value
  cursor: pointer
  min-width: $node-width
  height: auto
  padding-bottom: 6px
  box-sizing: content-box
  position: relative
  user-select: none
  &:hover
    background: lighten($node-color,4%)
  &.selected
    background: $node-color-selected
    border-color: #e3c000
  .title
    color: white
    font-family: sans-serif
    font-size: 18px
    padding: 8px
  .output
    text-align: right
  .input
    text-align: left
  .input-title,.output-title
    vertical-align: middle
    color: white
    display: inline-block
    font-family: sans-serif
    font-size: 14px
    margin: $socket-margin
    line-height: $socket-size
  .input-control
    z-index: 1
    width: calc(100% - #{$socket-size + 2*$socket-margin})
    vertical-align: middle
    display: inline-block
  .control
    padding: $socket-margin $socket-size/2 + $socket-margin

3. Define data.component (Vue component) in Rete.Component's constructor

class NumComponent extends Rete.Component {

    constructor(){
        super("Number");
        this.data.component = CustomNode;
    }

[akshayred]

@Ni55aN I tried this example. But I didn't see any changes in the node output. So what I am trying to achieve is that, putting names of sockets beside sockets. Please let me know how I can do that.

[Ni55aN]

@akshayred have you tried to change anything in the template? Is the this.data.component = CustomNode; present in constructor?

[akshayred]

I didn't change anything in template for initial tests. And yes I have this.data.component defined in constructor.

[Ni55aN]

Please share the full code or a live example so I will be able to understand what the problem is

[akshayred]

https://codepen.io/akshaykelotra/pen/WWjoaE

@Ni55aN it have the code, though it is using some AJAX requests so it might not work for that part.