Allow wrapping <VueFlow> in a transform

[JamieMair]

Is there an existing issue for this?

• I have searched the existing issues and this is a new bug.

Current Behavior

The rendering is incorrect when being embedded inside of a slidev slide. The current layout looks something like:

The main issue is that the nodes are being rendered in the wrong place. When dragging the nodes around, the node moves more than the mouse.

Expected Behavior

I expect that the diagram should display correctly, with all edges going to handle points on each node.

Steps To Reproduce

1. Create a new slidev project (link here)
2. Install @vue-flow/core to the project
3. Change the slides.md file to:

---
theme: seriph
title: Slidev Vue-Flow error
class: text-center
---

# Welcome to Slidev

---

# Text here

<RLAnatomy />

3. Create the files:

// components/VueFlowGraph.vue
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { useDarkMode } from '@slidev/client'

import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'

// Define props for nodes and edges
const props = defineProps({
  nodes: {
    type: Array,
    required: true
  },
  edges: {
    type: Array,
    required: true
  },
  nodeTypes: {
    type: Object,
    default: () => ({})
  }
})

const { isDark } = useDarkMode()

const { onInit, panOnDrag } = useVueFlow()

panOnDrag.value = false;

const nodes = ref(props.nodes)

const edges = ref(props.edges)

// Use Slidev's global dark mode state
const dark = computed(() => isDark.value)

let fitViewInterval = null

onInit((vueFlowInstance) => {
    // instance is the same as the return of `useVueFlow`
    vueFlowInstance.fitView({
        duration: 0,
        offset: [0, 0],
    })
})
</script>

<template>
    <div class="outer-container">
        <div class="graph-container">
            <VueFlow 
              :nodes="nodes" 
              :edges="edges" 
              :node-types="nodeTypes"
              :class="{ dark }" 
              class="basic-flow" 
              :min-zoom="1" 
              :max-zoom="1"
            >
            </VueFlow>
        </div>
    </div>
</template>

<style>
.outer-container {
  display: grid;
  place-content: center;
}

.graph-container {
    width: 50rem;
    height: 30rem;
}
</style>

and

// components/RLAnatomy
<script setup>
import { ref } from 'vue'
import { MarkerType } from '@vue-flow/core'
import VueFlowGraph from './VueFlowGraph.vue'

// Define RL-specific nodes
const rlNodes = ref([
  {
    id: 'agent',
    type: 'input',
    data: { label: '🤖 Agent' },
    position: { x: 350, y: 50 },
    class: 'light',
    style: { 
      backgroundColor: '#e3f2fd', 
      border: '2px solid #1976d2',
      borderRadius: '8px',
      padding: '10px'
    }
  },
  {
    id: 'environment',
    data: { label: '🌍 Environment' },
    position: { x: 350, y: 300 },
    class: 'light',
    style: { 
      backgroundColor: '#e8f5e8', 
      border: '2px solid #388e3c',
      borderRadius: '8px',
      padding: '10px'
    }
  },
  {
    id: 'state',
    data: { label: '📊 State (s)' },
    position: { x: 75, y: 175 },
    class: 'light',
    style: { 
      backgroundColor: '#fce4ec', 
      border: '2px solid #e91e63',
      borderRadius: '8px',
      padding: '10px'
    }
  },
  {
    id: 'action',
    data: { label: '⚡ Action (a)' },
    position: { x: 550, y: 175 },
    class: 'light',
    style: { 
      backgroundColor: '#fffde7', 
      border: '2px solid #f57f17',
      borderRadius: '8px',
      padding: '10px'
    }
  },
  {
    id: 'reward',
    type: 'output',
    data: { label: '🎯 Reward (r)' },
    position: { x: 250, y: 175 },
    class: 'light',
    style: { 
      backgroundColor: '#f3e5f5', 
      border: '2px solid #7b1fa2',
      borderRadius: '8px',
      padding: '10px'
    }
  }
])

// Define RL-specific edges showing the interaction loop
const rlEdges = ref([
  {
    id: 'agent-to-action',
    source: 'agent',
    target: 'action',
    label: 'selects',
    type: 'smoothstep',
    animated: true,
    markerEnd: MarkerType.ArrowClosed,
    style: { stroke: '#f57f17', strokeWidth: 2 }
  },
  {
    id: 'action-to-env',
    source: 'action',
    target: 'environment',
    label: 'executes',
    type: 'smoothstep',
    animated: true,
    markerEnd: MarkerType.ArrowClosed,
    style: { stroke: '#388e3c', strokeWidth: 2 }
  },
  {
    id: 'env-to-state',
    source: 'environment',
    target: 'state',
    label: 'observes',
    animated: true,
    type: 'smoothstep',
    markerEnd: MarkerType.ArrowClosed,
    style: { stroke: '#e91e63', strokeWidth: 2 }
  },
  {
    id: 'env-to-reward',
    source: 'environment',
    target: 'reward',
    label: 'provides',
    type: 'smoothstep',
    animated: true,
    markerEnd: MarkerType.ArrowClosed,
    style: { stroke: '#7b1fa2', strokeWidth: 2 }
  },
  {
    id: 'state-to-agent',
    source: 'state',
    target: 'agent',
    label: 'perceives',
    type: 'smoothstep',
    animated: true,
    markerEnd: MarkerType.ArrowClosed,
    style: { stroke: '#e91e63', strokeWidth: 2 }
  },
  {
    id: 'reward-to-agent',
    source: 'reward',
    target: 'agent',
    label: 'learns from',
    type: 'smoothstep',
    animated: true,
    markerEnd: MarkerType.ArrowClosed,
    style: { stroke: '#7b1fa2', strokeWidth: 2 }
  }
])
</script>

<template>
    <VueFlowGraph :nodes="rlNodes" :edges="rlEdges" />
</template>

4. Run the project under the "dev" task (i.e. npm run dev) which launches the slides. Use the arrow keys to navigate to the page and observe the effect (note that the graph is on the second slide:

Minimal reproduction of the issue with CodeSandbox

https://codesandbox.io/p/devbox/staging-cookies-z34pv5

Relevant log output

Anything else?

Slidev dynamically sizes the output so that the slides look exactly the same on all screen sizes. This might be interfering with the positioning.

[bcakmakoglu]

Slidev dynamically sizes the output so that the slides look exactly the same on all screen sizes. This might be interfering with the positioning.

I assume slidev uses transform or sth similar for this, which currently is not supported.
You cannot wrap <VueFlow> in a transform at this point and this will most likely not be a feature for v1.
Closing this as it's a won'tfix issue and opening a discussion instead as a feature request ^^