Skip to content

Commit

Permalink
chore(docs): update example styles (#1469)
Browse files Browse the repository at this point in the history
* chore(docs): update basic example styles

* chore(docs): update confirm delete example styles

* chore(docs): update dnd example styles

* chore(docs): update hidden example

* chore(docs): update update node example

* chore(docs): update node toolbar example styles

* chore(docs): update transition example styles

* chore(docs): cleanup basic example els

* chore(docs): cleanup examples
  • Loading branch information
bcakmakoglu committed Jun 10, 2024
1 parent 5dc8711 commit d71de0a
Show file tree
Hide file tree
Showing 34 changed files with 527 additions and 243 deletions.
23 changes: 13 additions & 10 deletions docs/examples/basic/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ import { initialEdges, initialNodes } from './initial-elements.js'
import Icon from './Icon.vue'
/**
* useVueFlow provides all event handlers and store properties
* You can pass the composable an object that has the same properties as the VueFlow component props
* `useVueFlow` provides:
* 1. a set of methods to interact with the VueFlow instance (like `fitView`, `setViewport`, `addEdges`, etc)
* 2. a set of event-hooks to listen to VueFlow events (like `onInit`, `onNodeDragStop`, `onConnect`, etc)
* 3. the internal state of the VueFlow instance (like `nodes`, `edges`, `viewport`, etc)
*/
const { onPaneReady, onNodeDragStop, onConnect, addEdges, setViewport, toObject } = useVueFlow()
const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject } = useVueFlow()
const nodes = ref(initialNodes)
Expand All @@ -24,10 +26,11 @@ const dark = ref(false)
* This is a Vue Flow event-hook which can be listened to from anywhere you call the composable, instead of only on the main component
* Any event that is available as `@event-name` on the VueFlow component is also available as `onEventName` on the composable and vice versa
*
* onPaneReady is called when viewpane & nodes have visible dimensions
* onInit is called when the VueFlow viewport is initialized
*/
onPaneReady(({ fitView }) => {
fitView()
onInit((vueFlowInstance) => {
// instance is the same as the return of `useVueFlow`
vueFlowInstance.fitView()
})
/**
Expand All @@ -39,8 +42,8 @@ onPaneReady(({ fitView }) => {
* 3. the node that initiated the drag
* 4. any intersections with other nodes
*/
onNodeDragStop(({ event, nodes, node, intersections }) => {
console.log('Node Drag Stop', { event, nodes, node, intersections })
onNodeDragStop(({ event, nodes, node }) => {
console.log('Node Drag Stop', { event, nodes, node })
})
/**
Expand Down Expand Up @@ -94,7 +97,7 @@ function toggleDarkMode() {
:nodes="nodes"
:edges="edges"
:class="{ dark }"
class="basicflow"
class="basic-flow"
:default-viewport="{ zoom: 1.5 }"
:min-zoom="0.2"
:max-zoom="4"
Expand All @@ -103,7 +106,7 @@ function toggleDarkMode() {

<MiniMap />

<Controls position="top-right">
<Controls position="top-left">
<ControlButton title="Reset Transform" @click="resetTransform">
<Icon name="reset" />
</ControlButton>
Expand Down
63 changes: 54 additions & 9 deletions docs/examples/basic/initial-elements.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,69 @@
import { MarkerType } from '@vue-flow/core'

export const initialNodes = [
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 0 }, class: 'light' },
{ id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
{ id: '4', label: 'Node 4', position: { x: 150, y: 200 }, class: 'light' },
{ id: '5', type: 'output', label: 'Node 5', position: { x: 300, y: 300 }, class: 'light' },
{
id: '1',
type: 'input',
data: { label: 'Node 1' },
position: { x: 250, y: 0 },
class: 'light',
},
{
id: '2',
type: 'output',
data: { label: 'Node 2' },
position: { x: 100, y: 100 },
class: 'light',
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
class: 'light',
},
{
id: '4',
data: { label: 'Node 4' },
position: { x: 150, y: 200 },
class: 'light',
},
{
id: '5',
type: 'output',
data: { label: 'Node 5' },
position: { x: 300, y: 300 },
class: 'light',
},
]

export const initialEdges = [
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', label: 'edge with arrowhead', source: '1', target: '3', markerEnd: MarkerType.ArrowClosed },
{
id: 'e1-2',
source: '1',
target: '2',
animated: true,
},
{
id: 'e1-3',
source: '1',
target: '3',
label: 'edge with arrowhead',
markerEnd: MarkerType.ArrowClosed,
},
{
id: 'e4-5',
type: 'step',
label: 'step-edge',
source: '4',
target: '5',
label: 'Node 2',
style: { stroke: 'orange' },
labelBgStyle: { fill: 'orange' },
},
{ id: 'e3-4', type: 'smoothstep', label: 'smoothstep-edge', source: '3', target: '4' },
{
id: 'e3-4',
type: 'smoothstep',
source: '3',
target: '4',
label: 'smoothstep-edge',
},
]
30 changes: 17 additions & 13 deletions docs/examples/basic/style.css
Original file line number Diff line number Diff line change
@@ -1,48 +1,52 @@
.basicflow.dark {
background: #000000;
.basic-flow.dark {
background: #2d3748;
color: #FFFFFB;
}

.basicflow.dark .vue-flow__node {
background: hsl(0, 0%, 10%);
.basic-flow.dark .vue-flow__node {
background: #4a5568;
color: #FFFFFB;
}

.basicflow.dark .vue-flow__node.selected {
.basic-flow.dark .vue-flow__node.selected {
background: hsl(0, 0%, 20%);
border: 1px solid hotpink;
box-shadow: 0 0 0 2px #2563eb;
}

.basicflow .vue-flow__controls {
.basic-flow .vue-flow__controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.basicflow.dark .vue-flow__controls {
.basic-flow.dark .vue-flow__controls {
border: 1px solid #FFFFFB;
}

.basicflow .vue-flow__controls .vue-flow__controls-button {
.basic-flow .vue-flow__controls .vue-flow__controls-button {
border: none;
border-right: 1px solid #eee;
}

.basic-flow .vue-flow__controls .vue-flow__controls-button svg {
height: 100%;
width: 100%;
}

.basicflow.dark .vue-flow__controls .vue-flow__controls-button {
.basic-flow.dark .vue-flow__controls .vue-flow__controls-button {
background: hsl(0, 0%, 20%);
fill: #FFFFFB;
border: none;
}

.basicflow.dark .vue-flow__controls .vue-flow__controls-button:hover {
.basic-flow.dark .vue-flow__controls .vue-flow__controls-button:hover {
background: hsl(0, 0%, 30%);
}

.basicflow.dark .vue-flow__edge-textbg {
.basic-flow.dark .vue-flow__edge-textbg {
fill: #292524;
}

.basicflow.dark .vue-flow__edge-text {
.basic-flow.dark .vue-flow__edge-text {
fill: #FFFFFB;
}
34 changes: 22 additions & 12 deletions docs/examples/confirm-delete/App.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup>
import { ref } from 'vue'
import { h, ref } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { useDialog } from './useDialog'
Expand All @@ -10,16 +10,26 @@ const { onConnect, addEdges, onNodesChange, onEdgesChange, applyNodeChanges, app
const dialog = useDialog()
const nodes = ref([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
{ id: '1', type: 'input', data: { label: 'Click me and' }, position: { x: 0, y: 0 } },
{ id: '2', data: { label: `press 'Backspace' to delete me` }, position: { x: 0, y: 100 } },
])
const edges = ref([
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
])
const edges = ref([{ id: 'e1-2', source: '1', target: '2' }])
function dialogMsg(id) {
return h(
'span',
{
style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '8px',
},
},
[`Are you sure?`, h('br'), h('span', `[ELEMENT_ID: ${id}]`)],
)
}
onConnect(addEdges)
Expand All @@ -28,7 +38,7 @@ onNodesChange(async (changes) => {
for (const change of changes) {
if (change.type === 'remove') {
const isConfirmed = await dialog.confirm(`Do you really want to delete this node: ${change.id}?`)
const isConfirmed = await dialog.confirm(dialogMsg(change.id))
if (isConfirmed) {
nextChanges.push(change)
Expand All @@ -46,7 +56,7 @@ onEdgesChange(async (changes) => {
for (const change of changes) {
if (change.type === 'remove') {
const isConfirmed = await dialog.confirm(`Do you really want to delete this edge: ${change.id}?`)
const isConfirmed = await dialog.confirm(dialogMsg(change.id))
if (isConfirmed) {
nextChanges.push(change)
Expand All @@ -61,7 +71,7 @@ onEdgesChange(async (changes) => {
</script>

<template>
<VueFlow :nodes="nodes" :edges="edges" :apply-default="false" fit-view-on-init class="vue-flow-basic-example">
<VueFlow :nodes="nodes" :edges="edges" :apply-default="false" fit-view-on-init class="confirm-flow">
<Background />

<Dialog />
Expand Down
34 changes: 30 additions & 4 deletions docs/examples/confirm-delete/Dialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,17 @@ function cancel() {
<template>
<div v-if="isVisible" class="dialog-overlay">
<div class="dialog">
<p>{{ message }}</p>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path
fill="#e53e3e"
d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z"
/>
</svg>

<div class="dialog-actions">
<p v-if="typeof message === 'string'">{{ message }}</p>
<component :is="message" v-else />

<div class="actions">
<button @click="confirm">Confirm</button>
<button @click="cancel">Cancel</button>
</div>
Expand All @@ -42,16 +50,34 @@ function cancel() {
}
.dialog {
background: white;
background: #2d3748;
padding: 20px;
border-radius: 5px;
text-align: center;
color: white;
}
.dialog-actions {
.dialog .actions {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 8px;
}
.dialog .actions button {
background: #4a5568;
color: white;
border: none;
padding: 8px 16px;
border-radius: 5px;
cursor: pointer;
}
.dialog .actions button:first-of-type:hover {
background: #2563eb;
}
.dialog .actions button:last-of-type:hover {
background: #e53e3e;
}
</style>
3 changes: 3 additions & 0 deletions docs/examples/confirm-delete/useDialog.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { ref } from 'vue'

/**
* In a real world example you would want to avoid creating refs in a global scope like this
*/
const isVisible = ref(false)
const message = ref('')
let resolveCallback
Expand Down
6 changes: 3 additions & 3 deletions docs/examples/connection-radius/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@ import ConnectionLine from './SnappableConnectionLine.vue'
const nodes = ref([
{
id: '1',
label: 'Node 1',
data: { label: 'Node 1' },
position: { x: 0, y: 0 },
},
{
id: '2',
label: 'Node 2',
data: { label: 'Node 2' },
position: { x: 100, y: 100 },
},
{
id: '3',
label: 'Node 3',
data: { label: 'Node 3' },
position: { x: 200, y: 0 },
},
])
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/connectionline/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const nodes = ref([
{
id: '1',
type: 'input',
label: 'Node 1',
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
},
])
Expand Down
Loading

0 comments on commit d71de0a

Please sign in to comment.