alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(flow)!: properly nest components

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-12-20 19:29:52 +01:00
parent 6bdea72b20
commit c96f62f622
12 changed files with 121 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/CustomNode/ColorSelectorNode.vue
+6 -8
View File
@@ -25,13 +25,11 @@ const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px'
const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
</script>
<template>
<div class="vue-flow__node-color-selector">
<Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
<div>
Custom Color Picker Node: <strong>{{ data.color }}</strong>
</div>
<input class="nodrag" type="color" :value="data.color" @input="props.data.onChange" />
<Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
<Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
<Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
<div>
Custom Color Picker Node: <strong>{{ data.color }}</strong>
</div>
<input class="nodrag" type="color" :value="data.color" @input="props.data.onChange" />
<Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
<Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
</template>
examples/CustomNode/CustomNode.vue
+3 -3
View File
@@ -63,7 +63,7 @@ onMounted(() => {
{
id: '1',
type: 'input',
data: { label: 'An input node' },
label: 'An input node',
position: { x: 0, y: 50 },
sourcePosition: Position.Right,
},
@@ -77,14 +77,14 @@ onMounted(() => {
{
id: '3',
type: 'output',
data: { label: 'Output A' },
label: 'Output A',
position: { x: 650, y: 25 },
targetPosition: Position.Left,
},
{
id: '4',
type: 'output',
data: { label: 'Output B' },
label: 'Output B',
position: { x: 650, y: 100 },
targetPosition: Position.Left,
},