Allow pan while Control key is pressed

[alexgrozav]

Is there an existing issue for this?

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

Current Behavior

When the Control key is pressed to enable zooming, you cannot pan. On MacOS we use Cmd, which works well.

Expected Behavior

You should be able to both pan and zoom. This happens only for the Control key. Setting it to something else, such as Space ' ', works.

Steps To Reproduce

1. Set pan-activation-key-code to Control.
2. Set zoom-activation-key-code to Control.
3. When the Control key is pressed to enable zooming, you cannot pan.

Relevant log output

No response

Anything else?

Environment: Chrome, Windows

[bcakmakoglu]

What is the logic behind this?

Set pan-activation-key-code to Control.
Set zoom-activation-key-code to Control.

If both are set to Control, what exactly would you expect to happen here?
You can't set both features to the same key, that's not going to work.

[alexgrozav]

Here's the logic we have:

• Default behaviour using the mouse is creating the selection rectangle
• Scroll wheel is used for panning vertically
• Shift + Scroll wheel is used for panning horizontally
• Middle mouse is used for panning
• CTRL + Scroll wheel is used for zooming (Cmd + Scroll wheel on MacOS)
• CTRL + Click and Drag is used for panning (Cmd + Click and Drag on MacOS)

I would expect to be able to both zoom and pan. If the activation key is used for multiple features, all the features should be available instead of being mutually exclusive.

[bcakmakoglu]

Alas, that is not a feature that is available atm and not an actual bug.
You'll have to remap these features to separate keys for now. I'll convert this to a discussion as a feature request and see what can be done about it.
One issue I can already see with this is that Control + Click creates a Contextmenu event, which would already be an issue when trying to drag something since it would just cause a rightclick to be triggered instead of a leftclick which is necessary for panning through drag.

[alexgrozav]

Tried it now. Seems to work, also reproduced n8n's use case.

Since the default behaviour is selection, we use [1] by default and then switch to [0,1], when Control or (Command) is pressed.

<script setup>
import { ref, onMounted } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { ControlButton, Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'
import { initialEdges, initialNodes } from './initial-elements.js'
import Icon from './Icon.vue'

/**
 * `useVueFlow` provides:
 * 1. a set of methods to interact with the VueFlow instance (like `fitView`, `setViewport`, `addEdges`, etc)
 * 2. a set of event-hooks to listen to VueFlow events (like `onInit`, `onNodeDragStop`, `onConnect`, etc)
 * 3. the internal state of the VueFlow instance (like `nodes`, `edges`, `viewport`, etc)
 */
const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject } = useVueFlow()

const nodes = ref(initialNodes)

const edges = ref(initialEdges)

// our dark mode toggle flag
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
 * Any event that is available as `@event-name` on the VueFlow component is also available as `onEventName` on the composable and vice versa
 *
 * onInit is called when the VueFlow viewport is initialized
 */
onInit((vueFlowInstance) => {
  // instance is the same as the return of `useVueFlow`
  vueFlowInstance.fitView()
})

/**
 * onNodeDragStop is called when a node is done being dragged
 *
 * Node drag events provide you with:
 * 1. the event object
 * 2. the nodes array (if multiple nodes are dragged)
 * 3. the node that initiated the drag
 * 4. any intersections with other nodes
 */
onNodeDragStop(({ event, nodes, node }) => {
  console.log('Node Drag Stop', { event, nodes, node })
})

/**
 * onConnect is called when a new connection is created.
 *
 * You can add additional properties to your new edge (like a type or label) or block the creation altogether by not calling `addEdges`
 */
onConnect((connection) => {
  addEdges(connection)
})

/**
 * To update a node or multiple nodes, you can
 * 1. Mutate the node objects *if* you're using `v-model`
 * 2. Use the `updateNode` method (from `useVueFlow`) to update the node(s)
 * 3. Create a new array of nodes and pass it to the `nodes` ref
 */
function updatePos() {
  nodes.value = nodes.value.map((node) => {
    return {
      ...node,
      position: {
        x: Math.random() * 400,
        y: Math.random() * 400,
      },
    }
  })
}

/**
 * toObject transforms your current graph data to an easily persist-able object
 */
function logToObject() {
  console.log(toObject())
}

/**
 * Resets the current viewport transformation (zoom & pan)
 */
function resetTransform() {
  setViewport({ x: 0, y: 0, zoom: 1 })
}

function toggleDarkMode() {
  dark.value = !dark.value
}
  
  const panOnDrag = ref([1]);
  const selectionKeyCode = ref(true);
  
  onMounted(() => {
    window.document.onkeydown = (e) => {
      if (e.key === 'Control') {
        selectionKeyCode.value = false;
        panOnDrag.value = [0,1];
      }
    }
    
    window.document.onkeyup = (e) => {
      if (e.key === 'Control') {
        selectionKeyCode.value = true;
        panOnDrag.value = [0,1];
      }
    }
    
  });
  
</script>

<template>
  <VueFlow
    :nodes="nodes"
    :edges="edges"
    :class="{ dark }"
    class="basic-flow"
    :default-viewport="{ zoom: 1.5 }"
    :min-zoom="0.2"
    :max-zoom="4"
                      :selection-key-code="selectionKeyCode"
pan-on-scroll
:pan-on-drag="panOnDrag"
pan-activation-key-code="Control"
zoom-activation-key-code="Control"
  >
    <Background pattern-color="#aaa" :gap="16" />

    <MiniMap />

    <Controls position="top-left">
      <ControlButton title="Reset Transform" @click="resetTransform">
        <Icon name="reset" />
      </ControlButton>

      <ControlButton title="Shuffle Node Positions" @click="updatePos">
        <Icon name="update" />
      </ControlButton>

      <ControlButton title="Toggle Dark Mode" @click="toggleDarkMode">
        <Icon v-if="dark" name="sun" />
        <Icon v-else name="moon" />
      </ControlButton>

      <ControlButton title="Log `toObject`" @click="logToObject">
        <Icon name="log" />
      </ControlButton>
    </Controls>
  </VueFlow>
</template>

[bcakmakoglu]

Okay cool, I'll probably release this fix this weekend, just discussion some details with the XYFlow team.

Btw, I hope you are aware that this might create an event binding that is never cleaned up?

onMounted(() => {
  window.document.onkeydown = (e) => {
    if (e.key === 'Control') {
      selectionKeyCode.value = false;
      panOnDrag.value = [0,1];
    }
  }
  
  window.document.onkeyup = (e) => {
    if (e.key === 'Control') {
      selectionKeyCode.value = true;
      panOnDrag.value = [0,1];
    }
  }
});

You can use useKeyPress which VueFlow provides instead which does not have the issue of not getting cleaned up when the component is unmounted.

import { useKeyPress } from '@vue-flow/core'

const isCtrlPressed = useKeyPress('Control')

watch(isCtrlPressed, (isKeyPressed) => {
	selectionKeyCode.value = !isKeyPressed
	panOnDrag.value = isKeyPressed ? [0,1] : [1]
})

[alexgrozav]

Yup! That was just an over-simplified reproduction. If you're curious to take a look at how we use VueFlow, the code is available here: https://github.com/n8n-io/n8n/blob/b1f866326574974eb2936e6b02771346e83e7137/packages/editor-ui/src/components/canvas/Canvas.vue#L4

Thanks a lot for addressing this. 🙏

[bcakmakoglu]

Okay :)
Thanks for sharing, I'll check it out 👍

[bcakmakoglu]

Released with 1.41.6 :)