From 4b4bcdccbb75733950005f613c9460fc35769fab Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 1 Feb 2024 13:30:59 +0100
Subject: [PATCH] docs: update basic example

---
 docs/examples/basic/App.vue   | 66 +++++++++++++++--------------------
 docs/examples/basic/Icon.vue  |  6 +---
 docs/examples/basic/style.css | 57 +++++++++++++++---------------
 3 files changed, 58 insertions(+), 71 deletions(-)

diff --git a/docs/examples/basic/App.vue b/docs/examples/basic/App.vue
index 73fd77e3..9cdafcc3 100644
--- a/docs/examples/basic/App.vue
+++ b/docs/examples/basic/App.vue
@@ -1,32 +1,33 @@
 <script setup>
-import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
+import { ControlButton, Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import { ref } from 'vue'
 import Icon from './Icon.vue'
 import { initialElements } from './initial-elements.js'
 
-/**
- * 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
- */
-const { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow()
+// useVueFlow returns all the event-hooks and methods you need to interact with the graph
+const { onPaneReady, onNodeDragStop, onConnect, addEdges, setViewport, toObject } = useVueFlow()
 
-/**
- * Our elements
- */
+// Elements v-model
 const elements = ref(initialElements)
 
+// Dark mode toggle
+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
+ * Event Hooks
  *
- * onPaneReady is called when viewpane & nodes have visible dimensions
+ * These are Vue Flow event-hooks which can be used to listen to events happening on the graph.
  */
+
+// onPaneReady is called when viewpane is ready (dimensions exist and are not 0)
 onPaneReady(({ fitView }) => {
   fitView()
 })
 
+// onNodeDragStop is called when a node is dragged and then released
 onNodeDragStop((e) => console.log('drag stop', e))
 
 /**
@@ -35,11 +36,10 @@ onNodeDragStop((e) => console.log('drag stop', e))
  */
 onConnect((params) => addEdges(params))
 
-const dark = ref(false)
-
 /**
  * To update node properties you can simply use your elements v-model and mutate the elements directly
- * Changes should always be reflected on the graph reactively, without the need to overwrite the elements
+ * Changes should always be reflected on the graph reactively, without the need to overwrite the original elements
+ * Be aware that VueFlow will change your initial `Node[]` and `Edge[]` elements to `GraphNode[]` and `GraphEdge[]`
  */
 function updatePos() {
   return elements.value.forEach((el) => {
@@ -52,18 +52,13 @@ function updatePos() {
   })
 }
 
-/**
- * toObject transforms your current graph data to an easily persist-able object
- */
 function logToObject() {
+  // `toObject` transforms your current graph data to an easily persist-able object
   return console.log(toObject())
 }
 
-/**
- * Resets the current viewpane transformation (zoom & pan)
- */
 function resetTransform() {
-  return setTransform({ x: 0, y: 0, zoom: 1 })
+  return setViewport({ x: 0, y: 0, zoom: 1 })
 }
 
 function toggleClass() {
@@ -73,32 +68,27 @@ function toggleClass() {
 
 <template>
   <VueFlow v-model="elements" :class="{ dark }" class="basicflow" :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="4">
-    <Background :pattern-color="dark ? '#FFFFFB' : '#aaa'" gap="8" />
+    <Background pattern-color="#aaa" :gap="16" />
 
     <MiniMap />
 
-    <Controls />
-
-    <Panel position="top-right" class="controls">
-      <button style="background-color: #113285; color: white" title="Reset Transform" @click="resetTransform">
+    <Controls position="top-right">
+      <ControlButton title="Reset Transform" @click="resetTransform">
         <Icon name="reset" />
-      </button>
+      </ControlButton>
 
-      <button style="background-color: #6f3381" title="Shuffle Node Positions" @click="updatePos">
+      <ControlButton title="Shuffle Node Positions" @click="updatePos">
         <Icon name="update" />
-      </button>
+      </ControlButton>
 
-      <button
-        :style="{ backgroundColor: dark ? '#FFFFFB' : '#292524', color: dark ? '#292524' : '#FFFFFB' }"
-        @click="toggleClass"
-      >
+      <ControlButton title="Toggle Mode" @click="toggleClass">
         <Icon v-if="dark" name="sun" />
         <Icon v-else name="moon" />
-      </button>
+      </ControlButton>
 
-      <button title="Log `toObject`" @click="logToObject">
+      <ControlButton title="Log `toObject`" @click="logToObject">
         <Icon name="log" />
-      </button>
-    </Panel>
+      </ControlButton>
+    </Controls>
   </VueFlow>
 </template>
diff --git a/docs/examples/basic/Icon.vue b/docs/examples/basic/Icon.vue
index 19f4b69d..312d0f0a 100644
--- a/docs/examples/basic/Icon.vue
+++ b/docs/examples/basic/Icon.vue
@@ -9,33 +9,29 @@ defineProps({
 
 <template>
   <svg v-if="name === 'reset'" width="16" height="16" viewBox="0 0 32 32">
-    <path fill="#FFFFFB" d="M18 28A12 12 0 1 0 6 16v6.2l-3.6-3.6L1 20l6 6l6-6l-1.4-1.4L8 22.2V16a10 10 0 1 1 10 10Z" />
+    <path d="M18 28A12 12 0 1 0 6 16v6.2l-3.6-3.6L1 20l6 6l6-6l-1.4-1.4L8 22.2V16a10 10 0 1 1 10 10Z" />
   </svg>
 
   <svg v-if="name === 'update'" width="16" height="16" viewBox="0 0 24 24">
     <path
-      fill="#FFFFFB"
       d="M14 20v-2h2.6l-3.2-3.2l1.425-1.425L18 16.55V14h2v6Zm-8.6 0L4 18.6L16.6 6H14V4h6v6h-2V7.4Zm3.775-9.425L4 5.4L5.4 4l5.175 5.175Z"
     />
   </svg>
 
   <svg v-if="name === 'sun'" width="16" height="16" viewBox="0 0 24 24">
     <path
-      fill="#292524"
       d="M12 17q-2.075 0-3.537-1.463Q7 14.075 7 12t1.463-3.538Q9.925 7 12 7t3.538 1.462Q17 9.925 17 12q0 2.075-1.462 3.537Q14.075 17 12 17ZM2 13q-.425 0-.712-.288Q1 12.425 1 12t.288-.713Q1.575 11 2 11h2q.425 0 .713.287Q5 11.575 5 12t-.287.712Q4.425 13 4 13Zm18 0q-.425 0-.712-.288Q19 12.425 19 12t.288-.713Q19.575 11 20 11h2q.425 0 .712.287q.288.288.288.713t-.288.712Q22.425 13 22 13Zm-8-8q-.425 0-.712-.288Q11 4.425 11 4V2q0-.425.288-.713Q11.575 1 12 1t.713.287Q13 1.575 13 2v2q0 .425-.287.712Q12.425 5 12 5Zm0 18q-.425 0-.712-.288Q11 22.425 11 22v-2q0-.425.288-.712Q11.575 19 12 19t.713.288Q13 19.575 13 20v2q0 .425-.287.712Q12.425 23 12 23ZM5.65 7.05L4.575 6q-.3-.275-.288-.7q.013-.425.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7q0 .4-.275.7q-.275.3-.687.287q-.413-.012-.713-.287ZM18 19.425l-1.05-1.075q-.275-.3-.275-.712q0-.413.275-.688q.275-.3.688-.287q.412.012.712.287L19.425 18q.3.275.288.7q-.013.425-.288.725q-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.287-.688q.012-.412.287-.712L18 4.575q.275-.3.7-.288q.425.013.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275q-.4 0-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.713-.275q.412 0 .687.275q.3.275.288.688q-.013.412-.288.712L6 19.425q-.275.3-.7.287q-.425-.012-.725-.287Z"
     />
   </svg>
 
   <svg v-if="name === 'moon'" width="16" height="16" viewBox="0 0 24 24">
     <path
-      fill="#FFFFFB"
       d="M12 21q-3.75 0-6.375-2.625T3 12q0-3.75 2.625-6.375T12 3q.35 0 .688.025q.337.025.662.075q-1.025.725-1.637 1.887Q11.1 6.15 11.1 7.5q0 2.25 1.575 3.825Q14.25 12.9 16.5 12.9q1.375 0 2.525-.613q1.15-.612 1.875-1.637q.05.325.075.662Q21 11.65 21 12q0 3.75-2.625 6.375T12 21Z"
     />
   </svg>
 
   <svg v-if="name === 'log'" width="16" height="16" viewBox="0 0 24 24">
     <path
-      fill="#292524"
       d="M20 19V7H4v12h16m0-16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16m-7 14v-2h5v2h-5m-3.42-4L5.57 9H8.4l3.3 3.3c.39.39.39 1.03 0 1.42L8.42 17H5.59l3.99-4Z"
     />
   </svg>
diff --git a/docs/examples/basic/style.css b/docs/examples/basic/style.css
index f376cd58..144a63eb 100644
--- a/docs/examples/basic/style.css
+++ b/docs/examples/basic/style.css
@@ -1,17 +1,42 @@
 .basicflow.dark {
-  background: #57534e;
+  background: #000000;
   color: #FFFFFB;
 }
 
 .basicflow.dark .vue-flow__node {
-  background: #292524;
+  background: hsl(0, 0%, 10%);
   color: #FFFFFB;
 }
 
+.basicflow.dark .vue-flow__node.selected {
+  background: hsl(0, 0%, 20%);
+  border: 1px solid hotpink;
+}
+
+.basicflow .vue-flow__controls {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.basicflow.dark .vue-flow__controls {
+  border: 1px solid #FFFFFB;
+}
+
+.basicflow .vue-flow__controls .vue-flow__controls-button {
+  border: none;
+  border-right: 1px solid #eee;
+}
+
+
 .basicflow.dark .vue-flow__controls .vue-flow__controls-button {
-  background: #292524;
+  background: hsl(0, 0%, 20%);
   fill: #FFFFFB;
-  border-color: #FFFFFB;
+  border: none;
+}
+
+.basicflow.dark .vue-flow__controls .vue-flow__controls-button:hover {
+  background: hsl(0, 0%, 30%);
 }
 
 .basicflow.dark .vue-flow__edge-textbg {
@@ -21,27 +46,3 @@
 .basicflow.dark .vue-flow__edge-text {
   fill: #FFFFFB;
 }
-
-.basicflow .controls {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 8px;
-}
-
-.basicflow .controls button {
-  padding: 4px;
-  border-radius: 5px;
-  font-weight: 600;
-  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
-  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.basicflow .controls button:hover {
-  transform: scale(102%);
-  transition: 250ms all ease;
-}