How to make the component work Controls

[EvgenyGulyaev]

I use vue 3.
I create component as usual

Template

<template>
  <VueFlow
    v-model="elements"
    :default-edge-options="{ type: 'smoothstep' }"
    class="vue-flow-basic-example"
    :default-zoom="1"
    :min-zoom="0.2"
    :max-zoom="8"
    fit-view-on-init
  >
    <Background pattern-color="#aaa" gap="8" />
    <Controls />
    <MiniMap pannable zoomable />
  </VueFlow>
</template>

In JS part I have code like this
in createElements I create array and return ref(elements)

export default defineComponent({
 name: 'Routes',
 components: {
   VueFlow, Background, Controls, MiniMap
 },
 data() {
   return {
     elements: this.createElements(),
   };
 },

But I can't use Controls and MiniMap ...
MiniMap = empty screen
Controls does't react on my action

NodeJs 16
vue-flow/controls 1.0.1.
vue-flow/minimap 1.0.1.
vue-flow/core 1.11.1.

I don't use setup

[bcakmakoglu]

Did you import the styles necessary for the components?

@import '@vue-flow/controls/dist/style.css';
@import '@vue-flow/minimap/dist/style.css';

Are you getting any errors for the Controls?

This example works completely fine for me.

<script lang="ts">
import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
import { VueFlow, isNode } from '@vue-flow/core'

import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'

export default defineComponent({
  name: 'BasicOptionsAPI',
  components: { VueFlow, Background, MiniMap, Controls },
  data() {
    return {
      instance: null as VueFlowStore | null,
      elements: [
        { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
        { id: '2', 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: 400, y: 200 }, class: 'light' },
        { id: 'e1-2', source: '1', target: '2', animated: true },
        { id: 'e1-3', source: '1', target: '3' },
      ] as Elements,
    }
  },
  methods: {
    logToObject() {
      console.log(this.instance?.toObject())
    },
    resetTransform() {
      this.instance?.setTransform({ x: 0, y: 0, zoom: 1 })
    },
    toggleclass() {
      this.elements.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
    },
    updatePos() {
      this.elements.forEach((el) => {
        if (isNode(el)) {
          el.position = {
            x: Math.random() * 400,
            y: Math.random() * 400,
          }
        }
      })
    },
    onNodeDragStop(e: FlowEvents['nodeDragStop']) {
      console.log('drag stop', e)
    },
    onPaneReady(instance: FlowEvents['paneReady']) {
      instance.fitView()
      this.instance = instance as any
    },
    onConnect(params: FlowEvents['connect']) {
      this.instance?.addEdges([params])
    },
  },
})
</script>

<template>
  <VueFlow
    v-model="elements"
    class="vue-flow-basic-example"
    :default-zoom="1.5"
    :min-zoom="0.2"
    :max-zoom="4"
    :zoom-on-scroll="false"
    @connect="onConnect"
    @pane-ready="onPaneReady"
    @node-drag-stop="onNodeDragStop"
  >
    <Background />
    <MiniMap />
    <Controls />
    <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
      <button style="margin-right: 5px" @click="resetTransform">reset transform</button>
      <button style="margin-right: 5px" @click="updatePos">change pos</button>
      <button style="margin-right: 5px" @click="toggleclass">toggle class</button>
      <button @click="logToObject">toObject</button>
    </div>
  </VueFlow>
</template>

[EvgenyGulyaev]

--- Did you import the styles necessary for the components?
Yes, I imported.
Also I checked click on plus and I got event zoom-in

[EvgenyGulyaev]

demo

2023-01-11.11.11.49.mov

[bcakmakoglu]

Can you provide a sandbox reproduction?
Here's an example, which works fine, so I need some more details on your setup otherwise it's hard to figure out what's going on 😅

[EvgenyGulyaev]

I tried your example I got the same error

2023-01-11.11.22.07.mov

[bcakmakoglu]

As mentioned previously, can you provide a sandbox with a reproduction? A link to the example is above.
Using the code I posted above in a sandbox seems to work fine so there must be something wrong with your setup I assume.

[EvgenyGulyaev]

Also can I roll up node section ? Do you have this functional ?

[bcakmakoglu]

What do you mean by "roll up"? 😄

[EvgenyGulyaev]

I mean when you double-click or when you click on the arrow hide the content, leaving only the title

[EvgenyGulyaev]

=)

[bcakmakoglu]

I mean you can use a custom node component and implement an accordion-like behavior in there, sure.
The default nodes don't come with such a functionality, they're after all just very simple nodes that only display a label.

[EvgenyGulyaev]

I guess this is problem with vue-cli. I close this discussion

[bcakmakoglu]

Ah, thanks for the hint, I'll try to reproduce it and see what's up.
I think I know what the issue is and if I'm right it will be fixed in the very near future :)

[EvgenyGulyaev]

I have the following error in console

I created project in 2020 December via vue-cli

But I think it has nothing to do with it

[bcakmakoglu]

You should try to switch to Vite based project as suggested on the vue cli docs.

Those errors I have never seen previously
I really need a sandbox for these issues 😞
Screenshots are very limited and I can't really deduce what's up from them.