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

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