Chaning the shape of a node
pswin opened this issue · comments
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?
Please create issue in related repo: https://github.com/retejs/rete/issues
Example: https://codepen.io/Ni55aN/pen/EGZOdK
- 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
}
}
- 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
- Define
data.component
(Vue component) in Rete.Component's constructor
class NumComponent extends Rete.Component {
constructor(){
super("Number");
this.data.component = CustomNode;
}
@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.
@akshayred have you tried to change anything in the template?
Is the this.data.component = CustomNode;
present in constructor?
I didn't change anything in template for initial tests. And yes I have this.data.component defined in constructor.
Please share the full code or a live example so I will be able to understand what the problem is
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.