Chaning the shape of a node

[Pouya Shahinfar]

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?

[Vitaliy Stoliarov]

retejs/rete#209 (comment)

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

[Vitaliy Stoliarov]

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

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

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
  }
}

2. Add styles

$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.

[Vitaliy Stoliarov]

@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.

[Vitaliy Stoliarov]

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.