-
-
Notifications
You must be signed in to change notification settings - Fork 36
/
Node.vue
82 lines (75 loc) · 1.79 KB
/
Node.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template lang="pug">
.node(:class="[selected(), node.name] | kebab")
.title {{node.name}}
// Outputs
.output(v-for='output in outputs()' :key="output.key")
.output-title {{output.name}}
Socket(v-socket:output="output", type="output", :socket="output.socket")
// Controls
.control(
v-for='control in controls()',
:key="control.key",
v-control="control"
)
// Inputs
.input(v-for='input in inputs()' :key="input.key")
Socket(v-socket:input="input", type="input", :socket="input.socket")
.input-title(v-show='!input.showControl()') {{input.name}}
.input-control(
v-show='input.showControl()'
v-control="input.control"
)
</template>
<script>
import mixin from './mixin';
import Socket from './Socket.vue';
export default {
mixins: [mixin],
components: {
Socket
}
}
</script>
<style lang="sass" scoped>
@import "./vars"
.node
background: $node-color
border: 2px solid #4e58bf
border-radius: 10px
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
</style>