docs: update examples

docs/components/examples/interaction/App.vue

@@ -14,7 +14,7 @@ const elements = ref([
 </script>
 
 <template>
-  <VueFlow v-model="elements" class="interactionflow" :fit-view-on-init="true">
+  <VueFlow v-model="elements" class="interactionflow" fit-view-on-init>
     <InteractionControls />
   </VueFlow>
 </template>

docs/components/examples/interaction/InteractionControls.vue

@@ -23,14 +23,21 @@ const {
 } = useVueFlow()
 
 const captureZoomClick = ref(false)
+
 const captureZoomScroll = ref(false)
 
 onConnect((params) => addEdges([params]))
+
 onNodeDragStart((e) => console.log('drag start', e))
+
 onNodeDragStop((e) => console.log('drag stop', e))
+
 onPaneClick((event) => captureZoomClick.value && console.log('pane click', event))
+
 onPaneScroll((event) => captureZoomScroll.value && console.log('pane scroll', event))
+
 onPaneContextMenu((event) => captureZoomClick.value && console.log('pane ctx menu', event))
+
 onMoveEnd((flowTransform) => console.log('move end', flowTransform))
 </script>
 

docs/components/examples/interaction/style.css

@@ -6,7 +6,7 @@
   font-size: 11px;
   background-color: lightgray;
   border-bottom-right-radius: 10px;
-  padding: 12px;
+  padding: 8px;
 }
 
 .interactionflow .controls .label {