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

docs: update examples

Browse Source
This commit is contained in:
bcakmakoglu
2022-05-27 23:36:01 +02:00
committed by Braks
parent d55aba3f17
commit 8e3f1a394d
14 changed files with 170 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/examples/edges/App.vue
+15 -15
View File
@@ -6,36 +6,36 @@ import CustomEdge2 from './CustomEdge2.vue'
import CustomEdgeLabel from './CustomEdgeLabel.vue'
const elements = ref([
{ id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },
{ id: '1', type: 'input', label: 'Start', position: { x: 50, y: 0 }, style: { borderColor: '#10b981' } },
{ id: '2', label: 'Node 2', position: { x: 150, y: 100 } },
{ id: '2a', label: 'Node 2a', position: { x: 0, y: 180 } },
{ id: '3', label: 'Node 3', position: { x: 250, y: 200 } },
{ id: '4', label: 'Node 4', position: { x: 400, y: 300 } },
{ id: '3a', label: 'Node 3a', position: { x: 150, y: 300 } },
{ id: '5', label: 'Node 5', position: { x: 250, y: 400 } },
{ id: '6', type: 'output', label: 'Output 6', position: { x: 50, y: 550 } },
{ id: '7', type: 'output', label: 'Output 7', position: { x: 250, y: 550 } },
{ id: '8', type: 'output', label: 'Output 8', position: { x: 525, y: 600 } },
{ id: '9', type: 'output', label: 'Output 9', position: { x: 675, y: 500 } },
{ id: '3a', label: 'Node 3a', position: { x: 175, y: 300 } },
{ id: '5', label: 'Node 5', position: { x: 200, y: 400 } },
{ id: '6', type: 'output', label: 'Output 6', position: { x: 0, y: 350 } },
{ id: '7', type: 'output', label: 'Output 7', position: { x: 50, y: 600 } },
{ id: '8', type: 'output', label: 'Output 8', position: { x: 350, y: 600 } },
{ id: '9', type: 'output', label: 'Output 9', position: { x: 550, y: 400 } },
{ id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', class: 'normal-edge' },
{ id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
{ id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
{ id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
{ id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
{ id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
{ id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: '#10b981' } },
{
id: 'e5-6',
source: '5',
id: 'e2a-6',
source: '2a',
target: '6',
label: () => h(CustomEdgeLabel, { label: 'custom label text' }),
labelStyle: { fill: 'red', fontWeight: 700 },
labelStyle: { fill: '#10b981', fontWeight: 700 },
markerEnd: MarkerType.Arrow,
},
{
id: 'e5-7',
source: '5',
target: '7',
label: 'label with styled bg',
label: 'label with bg',
labelBgPadding: [8, 4],
labelBgBorderRadius: 4,
labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
@@ -50,11 +50,11 @@ const elements = ref([
markerEnd: MarkerType.ArrowClosed,
},
{
id: 'e5-9',
source: '5',
id: 'e4-9',
source: '4',
target: '9',
type: 'custom2',
data: { text: 'custom edge 2' },
data: { text: 'styled custom edge label' },
},
])
</script>
docs/components/examples/edges/CustomEdge.vue
+1 -1
View File
@@ -93,7 +93,7 @@ export default {
>
<body style="display: flex; align-items: center; justify-content: center">
<div>
<button ref="btn" class="edgebutton animated-text-gradient" @click="(event) => onClick(event, id)">×</button>
<button ref="btn" class="edgebutton" @click="(event) => onClick(event, id)">×</button>
</div>
</body>
</foreignObject>
docs/components/examples/edges/CustomEdge2.vue
+1 -1
View File
@@ -89,7 +89,7 @@ export default {
:label="props.data?.text"
:label-style="{ fill: 'white' }"
:label-show-bg="true"
:label-bg-style="{ fill: 'red' }"
:label-bg-style="{ fill: '#10b981' }"
:label-bg-padding="[2, 4]"
:label-bg-border-radius="2"
@click="onClick"
docs/components/examples/edges/style.css
+3 -27
View File
@@ -1,34 +1,10 @@
.edgebutton {
color: whitesmoke;
border-radius: 999px;
cursor: pointer;
}
.edgebutton:hover {
box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
}
.animated-text-gradient {
background: linear-gradient(122deg, #6f3381, #81c7d4, #fedfe1, #fffffb);
background-size: 800% 800%;
-webkit-animation: textgradient 4s ease infinite;
-moz-animation: textgradient 4s ease infinite;
animation: textgradient 4s ease infinite;
}
@-webkit-keyframes textgradient {
0%{background-position:0% 22%}
50%{background-position:100% 79%}
100%{background-position:0% 22%}
}
@-moz-keyframes textgradient {
0%{background-position:0% 22%}
50%{background-position:100% 79%}
100%{background-position:0% 22%}
}
@keyframes textgradient {
0%{background-position:0% 22%}
50%{background-position:100% 79%}
100%{background-position:0% 22%}
transform: scale(110%);
transition: all ease 500ms;
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5), 0 0 0 4px #10b981;
}