chore(docs): update example styles (#1469)

* 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

Author: bcakmakoglu

docs/examples/basic/App.vue

@@ -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)
 
@@ -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()
 })
 
 /**
@@ -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 })
 })
 
 /**
@@ -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"
@@ -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>

docs/examples/basic/initial-elements.js

@@ -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',
+  },
 ]

docs/examples/basic/style.css

@@ -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;
 }

docs/examples/confirm-delete/App.vue

@@ -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'
@@ -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)
 
@@ -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)
@@ -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)
@@ -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 />

docs/examples/confirm-delete/Dialog.vue

@@ -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>
@@ -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>

docs/examples/confirm-delete/useDialog.js

@@ -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

docs/examples/connection-radius/App.vue

@@ -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 },
   },
 ])

docs/examples/connectionline/App.vue

@@ -7,7 +7,7 @@ const nodes = ref([
   {
     id: '1',
     type: 'input',
-    label: 'Node 1',
+    data: { label: 'Node 1' },
     position: { x: 250, y: 5 },
   },
 ])