🐛 [BUG]: Controls and MiniMap not rendering

[Devmond]

Is there an existing issue for this?

• #1951

Current Behavior

I have integrated Vueflow into an application by bundling via webpack and included the bundle and css in a webpage. It works for the most part except for some reason the controls and minimap components are not rendered.

I have observed the DOM and can see that those component are not instantiated, there are no errors.

Expected Behavior

Here's my basic html to paste in codepen, also attached is the css.

vueflow.css

<div id="vueflow">
  {{appLabel}}
  <div style="width:100%; height: 100vh;">

    
    <vue-flow :nodes="nodes"  :edges="edges">

      <background pattern-color="#aaa" :gap="8" />
      <controls position="bottom-left" />

    </vue-flow>

  </div>

</div>

Steps To Reproduce

You can include the attached bundle and css to codepen and see the same issue.

vueflow-bundle.js

If you use codepen, just include the attached bundle in
the js editor and add the following code:

window.addEventListener('load', (event) => {
 let vueflowApp = Vue.createApp({
                   "el":`#vueflow`,
                   data(){
                   	 return {
                       appLabel:"Vueflow App",
                     	nodes:[
  {
    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',
  },
],
                        edges:[
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    animated: true,
  },
  {
    id: 'e1-3',
    source: '1',
    target: '3',
    label: 'edge with arrowhead'
  },
  {
    id: 'e4-5',
    type: 'step',
    source: '4',
    target: '5',
    label: 'Node 2',
    style: { stroke: 'orange' },
    labelBgStyle: { fill: 'orange' },
  },
  {
    id: 'e3-4',
    type: 'smoothstep',
    source: '3',
    target: '4',
    label: 'smoothstep-edge',
  },
]
                     }
                   }
              });
  
              const components = {
                //"VueFlow":VueFlowModule.VueFlow.VueFlow,
                "Background":VueFlowModule.Background.Background, 
                //"BackgroundVariant":VueFlowModule.BackgroundVariant,
                "MiniMap":VueFlowModule.MiniMap.MiniMap,
                "MiniMapNode":VueFlowModule.MiniMap.MiniMapNode,
                "Controls":VueFlowModule.Controls.Controls,
                "ControlButton":VueFlowModule.Controls.ControlButton,
                "NodeToolbar":VueFlowModule.NodeToolbar.NodeToolbar,
                "NodeResizer":VueFlowModule.NodeResizer.NodeResizer,
                "NodeResizeControl":VueFlowModule.NodeResizer.NodeResizeControl
              }  
              
function isVueComponent(obj) {
                  return typeof obj === 'object' && obj !== null && typeof obj.setup === 'function';
              }

              for (const key in VueFlowModule.VueFlow) {
                  // Check if the property is a Vue component based on the presence of setup()
                  if (isVueComponent(VueFlowModule.VueFlow[key])) {
                      vueflowApp.component(key, VueFlowModule.VueFlow[key]);
                  }
              }
  
for(const [componentName,component] of Object.entries(components)){
		  vueflowApp.component(componentName,component);
              }   
  try{
  vueflowApp.mount("#vueflow");
  }catch(error){
    console.log(error)
    
  }
})

Minimal reproduction of the issue with CodeSandbox

No response

Relevant log output

Anything else?

No response

[bcakmakoglu]

Please provide a proper reproduction of this issue and not just some js file that I will surely not download.

[Devmond]

hi @bcakmakoglu here's a link showing the issue:
https://jsfiddle.net/h0mpn5ca/

The JS editor includes the bundle at the top and the app code at the bottom.

Also on a related note, is there a simple option to allow scrollbars beyond dragging the view pane? There is the prevent-scrolling flag, but turning it off doesn't display scrollbars (either vertical or horizontal).

We want users to be able to use scrollbars to navigate a process flow and use the controls to zoom.

[bcakmakoglu]

hi @bcakmakoglu here's a link showing the issue:
jsfiddle.net/h0mpn5ca

This isn't a proper and clean repro tbh, it's just some bundle code you generated from each VueFlow package and then pushed into a fiddle from what I can tell. It's basically impossible for me to debug and know how you even structured the bundle you generated like idk how you generate VueFlowModule and all its dependencies.

Also on a related note, is there a simple option to allow scrollbars beyond dragging the view pane?

If I understand you correctly, assuming you mean using a scrollbar for the viewport -> No.
What you can do is create a layout around VueFlow, add a translate and node extent to limit movement to that container and add a scrollbar to that container. Alas, I have no example for this so you'd have to figure it out on your own.

[bcakmakoglu]

Also transferring this to discussions since I am fairly certain this is not a bug but just an issue with how you use VueFlow in this context.