feat: implement workspaces

2022-04-04 21:42:48 +02:00
parent cc96739c38
commit cd817b7f53
153 changed files with 8970 additions and 1191 deletions
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import EdgeWrapper from '../../components/Edges/EdgeWrapper.vue'
+import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
+import { useVueFlow } from '../../composables'
+import { groupEdgesByZLevel } from '../../utils'
+import MarkerDefinitions from './MarkerDefinitions.vue'
+
+const { store } = useVueFlow()
+
+const sourceNode = controlledComputed(
+  () => store.connectionNodeId,
+  () => {
+    if (store.connectionNodeId) return store.getNodes[store.getNodes.map((n) => n.id).indexOf(store.connectionNodeId)]
+  },
+)
+const connectionLineVisible = controlledComputed(
+  () => store.connectionNodeId,
+  () =>
+    !!(
+      sourceNode.value &&
+      (typeof sourceNode.value.connectable === 'undefined' ? store.nodesConnectable : sourceNode.value.connectable) &&
+      store.connectionNodeId &&
+      store.connectionHandleType
+    ),
+)
+const groups = computed(() => groupEdgesByZLevel(store.getEdges, store.getNodes))
+</script>
+<script lang="ts">
+export default {
+  name: 'Edges',
+}
+</script>
+<template>
+  <svg
+    v-for="group of groups"
+    :key="group.level"
+    :width="store.dimensions.width"
+    :height="store.dimensions.height"
+    class="vue-flow__edges vue-flow__container"
+    :style="`z-index: ${group.level}`"
+  >
+    <MarkerDefinitions v-if="group.isMaxLevel" :default-color="store.defaultMarkerColor" />
+    <g>
+      <EdgeWrapper
+        v-for="edge of group.edges"
+        :id="edge.id"
+        :key="edge.id"
+        :selectable="typeof edge.selectable === 'undefined' ? store.elementsSelectable : edge.selectable"
+        :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable"
+      >
+        <template #default="edgeProps">
+          <slot v-if="edge.type" :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>
+        </template>
+      </EdgeWrapper>
+      <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode">
+        <template #default="customConnectionLineProps">
+          <slot name="connection-line" v-bind="customConnectionLineProps"></slot>
+        </template>
+      </ConnectionLine>
+    </g>
+  </svg>
+</template>
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { MarkerProps } from '../../types/edge'
+
+const props = withDefaults(defineProps<MarkerProps>(), {
+  width: 12.5,
+  height: 12.5,
+  markerUnits: 'strokeWidth',
+  orient: 'auto',
+  strokeWidth: 1,
+  color: 'none',
+})
+</script>
+<script lang="ts">
+export default {
+  name: 'Marker',
+}
+</script>
+<template>
+  <marker
+    :id="props.id"
+    class="vue-flow__arrowhead"
+    viewBox="-10 -10 20 20"
+    refX="0"
+    refY="0"
+    :markerWidth="`${props.width}`"
+    :markerHeight="`${props.height}`"
+    :markerUnits="props.markerUnits"
+    :orient="props.orient"
+  >
+    <polyline
+      v-if="props.type === 'arrowclosed'"
+      :stroke="props.color"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      :stroke-width="props.strokeWidth"
+      :fill="props.color"
+      points="-5,-4 0,0 -5,4 -5,-4"
+    />
+    <polyline
+      v-if="props.type === 'arrow'"
+      :stroke="props.color"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      :stroke-width="props.strokeWidth"
+      fill="none"
+      points="-5,-4 0,0 -5,4"
+    />
+  </marker>
+</template>
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { useVueFlow } from '../../composables'
+import type { MarkerProps } from '../../types/edge'
+import { getMarkerId } from '../../utils'
+import { MarkerType } from '../../types/edge'
+import Marker from './Marker.vue'
+
+interface MarkerDefinitionsProps {
+  defaultColor: string
+}
+
+const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
+  defaultColor: '',
+})
+const { store } = useVueFlow()
+
+const markers = computed(() => {
+  const ids: string[] = []
+
+  return store.edges.reduce<MarkerProps[]>((markers, edge) => {
+    ;[edge.markerStart, edge.markerEnd].forEach((marker) => {
+      if (marker) {
+        const markerId = getMarkerId(marker)
+        if (!ids.includes(markerId)) {
+          if (typeof marker === 'object') markers.push({ ...marker, id: markerId, color: marker.color || props.defaultColor })
+          else markers.push({ id: markerId, color: props.defaultColor, type: marker as MarkerType })
+          ids.push(markerId)
+        }
+      }
+    })
+    return markers.sort((a, b) => a.id.localeCompare(b.id))
+  }, [])
+})
+</script>
+<script lang="ts">
+export default {
+  name: 'MarkerDefinitions',
+}
+</script>
+<template>
+  <defs>
+    <Marker
+      v-for="marker of markers"
+      :id="marker.id"
+      :key="marker.id"
+      :type="marker.type"
+      :color="marker.color"
+      :width="marker.width"
+      :height="marker.height"
+      :markerUnits="marker.markerUnits"
+      :stroke-width="marker.strokeWidth"
+      :orient="marker.orient"
+    />
+  </defs>
+</template>
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import NodeWrapper from '../../components/Nodes/NodeWrapper.vue'
+import { useVueFlow } from '../../composables'
+
+const { store } = useVueFlow()
+</script>
+<script lang="ts">
+export default {
+  name: 'Nodes',
+}
+</script>
+<template>
+  <div class="vue-flow__nodes vue-flow__container">
+    <NodeWrapper
+      v-for="node of store.getNodes"
+      :id="node.id"
+      :key="node.id"
+      :draggable="typeof node.draggable === 'undefined' ? store.nodesDraggable : !!node.draggable"
+      :selectable="typeof node.selectable === 'undefined' ? store.elementsSelectable : !!node.selectable"
+      :connectable="typeof node.connectable === 'undefined' ? store.nodesConnectable : !!node.connectable"
+      :snap-grid="node.snapGrid ?? (store.snapToGrid ? store.snapGrid : undefined)"
+    >
+      <template #default="nodeProps">
+        <slot v-if="node.type" :name="`node-${node.type}`" v-bind="nodeProps"></slot>
+      </template>
+    </NodeWrapper>
+  </div>
+</template>
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { EdgeChange, NodeChange } from '../../types'
+import { useVueFlow, useKeyPress } from '../../composables'
+import { getConnectedEdges } from '../../utils'
+import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
+import UserSelection from '../../components/UserSelection/UserSelection.vue'
+
+const { id, store } = useVueFlow()
+
+const onClick = (event: MouseEvent) => {
+  store.hooks.paneClick.trigger(event)
+  store.nodesSelectionActive = false
+  store.resetSelectedElements()
+}
+
+const onContextMenu = (event: MouseEvent) => store.hooks.paneContextMenu.trigger(event)
+
+const onWheel = (event: WheelEvent) => store.hooks.paneScroll.trigger(event)
+
+useKeyPress(store.deleteKeyCode, (keyPressed) => {
+  const selectedNodes = store.getSelectedNodes
+  const selectedEdges = store.getSelectedEdges
+  if (keyPressed && (selectedNodes || selectedEdges)) {
+    const connectedEdges = (selectedNodes && getConnectedEdges(selectedNodes, store.edges)) ?? []
+
+    const nodeChanges: NodeChange[] = selectedNodes.map((n) => ({ id: n.id, type: 'remove' }))
+    const edgeChanges: EdgeChange[] = [...selectedEdges, ...connectedEdges].map((e) => ({
+      id: e.id,
+      type: 'remove',
+    }))
+
+    store.hooks.nodesChange.trigger(nodeChanges)
+    store.hooks.edgesChange.trigger(edgeChanges)
+    store.nodesSelectionActive = false
+
+    store.resetSelectedElements()
+  }
+})
+
+useKeyPress(store.multiSelectionKeyCode, (keyPressed) => {
+  store.multiSelectionActive = keyPressed
+})
+
+useKeyPress(store.selectionKeyCode, (keyPressed) => {
+  if (store.userSelectionActive && keyPressed) return
+  store.userSelectionActive = keyPressed && store.elementsSelectable
+})
+</script>
+<script lang="ts">
+export default {
+  name: 'SelectionPane',
+  inheritAttrs: false,
+}
+</script>
+<template>
+  <UserSelection v-if="store.userSelectionActive" :key="`user-selection-${id}`" />
+  <NodesSelection v-if="store.nodesSelectionActive" :key="`nodes-selection-${id}`" />
+  <div
+    :key="`flow-pane-${id}`"
+    class="vue-flow__pane vue-flow__container"
+    @click="onClick"
+    @contextmenu="onContextMenu"
+    @wheel="onWheel"
+  />
+</template>
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
+import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
+import { useVueFlow, useZoomPanHelper } from '../../composables'
+import { FlowInstance } from '../../types'
+import { onLoadGetEdges, onLoadGetElements, onLoadGetNodes, onLoadProject, onLoadToObject } from '../../utils'
+
+const { id, store } = useVueFlow()
+
+onMounted(() => {
+  const { zoomIn, zoomOut, zoomTo, setTransform, getTransform, fitView, fitBounds, setCenter } = useZoomPanHelper(store)
+  const instance: FlowInstance = {
+    fitView: (params = { padding: 0.1 }) => fitView(params),
+    zoomIn,
+    zoomOut,
+    zoomTo,
+    setTransform,
+    getTransform,
+    setCenter,
+    fitBounds,
+    project: onLoadProject(store),
+    getElements: onLoadGetElements(store),
+    getNodes: onLoadGetNodes(store),
+    getEdges: onLoadGetEdges(store),
+    toObject: onLoadToObject(store),
+  }
+  store.instance = instance
+  store.fitViewOnInit && instance.fitView()
+  store.paneReady = true
+  store.hooks.paneReady.trigger(instance)
+})
+
+const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
+</script>
+<template>
+  <div :key="`transformation-pane-${id}`" class="vue-flow__transformation-pane vue-flow__container" :style="{ transform }">
+    <NodeRenderer v-if="store.getNodes.length" :key="`node-renderer-${id}`">
+      <template
+        v-for="nodeName of Object.keys(store.getNodeTypes)"
+        #[`node-${nodeName}`]="nodeProps"
+        :key="`node-${nodeName}-${id}`"
+      >
+        <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
+      </template>
+    </NodeRenderer>
+    <EdgeRenderer :key="`edge-renderer-${id}`">
+      <template
+        v-for="edgeName of Object.keys(store.getEdgeTypes)"
+        #[`edge-${edgeName}`]="edgeProps"
+        :key="`edge-${edgeName}-${id}`"
+      >
+        <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
+      </template>
+      <template #connection-line="customConnectionLineProps">
+        <slot name="connection-line" v-bind="customConnectionLineProps" />
+      </template>
+    </EdgeRenderer>
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import ZoomPane from '../ZoomPane/ZoomPane.vue'
+import { createHooks, useHooks } from '../../store'
+import { useVueFlow } from '../../composables'
+import type { FlowProps } from '../../types/flow'
+import useWatch from './watch'
+
+const props = withDefaults(defineProps<FlowProps>(), {
+  snapToGrid: undefined,
+  onlyRenderVisibleElements: undefined,
+  edgesUpdatable: undefined,
+  nodesConnectable: undefined,
+  nodesDraggable: undefined,
+  elementsSelectable: undefined,
+  selectNodesOnDrag: undefined,
+  preventScrolling: undefined,
+  zoomOnScroll: undefined,
+  zoomOnPinch: undefined,
+  zoomOnDoubleClick: undefined,
+  panOnScroll: undefined,
+  panOnDrag: undefined,
+  applyDefault: undefined,
+  fitViewOnInit: undefined,
+  connectOnClick: undefined,
+  connectionLineStyle: () => null,
+})
+const emit = defineEmits([...Object.keys(createHooks()), 'update:modelValue', 'update:edges', 'update:nodes'])
+
+const {
+  id,
+  store,
+  hooks,
+  applyDefault,
+  setElements,
+  setEdges,
+  setNodes,
+  getNodeTypes,
+  getEdgeTypes,
+  onNodesChange,
+  onEdgesChange,
+  applyNodeChanges,
+  applyEdgeChanges,
+  nodes: storedNodes,
+  edges: storedEdges,
+} = useVueFlow(props)
+useHooks(hooks.value, emit)
+const { modelValue, nodes, edges } = useVModels(props, emit)
+onMounted(() => useWatch({ modelValue, nodes, edges }, props, store))
+
+if (applyDefault.value) {
+  onNodesChange(applyNodeChanges)
+  onEdgesChange(applyEdgeChanges)
+}
+if (props.modelValue && !storedNodes.value.length) setElements(props.modelValue)
+if (props.nodes && !storedNodes.value.length) setNodes(props.nodes)
+if (props.edges && !storedEdges.value.length) setEdges(props.edges)
+
+if (modelValue && modelValue.value) {
+  watch([() => storedEdges.value.length, () => storedNodes.value.length], () => {
+    modelValue.value = [...storedNodes.value, ...storedEdges.value]
+  })
+}
+
+if (nodes && nodes.value) {
+  watch(
+    () => storedNodes.value.length,
+    () => (nodes.value = [...storedNodes.value]),
+  )
+}
+
+if (edges && edges.value) {
+  watch(
+    () => storedEdges.value.length,
+    () => (edges.value = [...storedEdges.value]),
+  )
+}
+</script>
+<script lang="ts">
+export default {
+  name: 'VueFlow',
+}
+</script>
+<template>
+  <div class="vue-flow">
+    <ZoomPane :key="`renderer-${id}`">
+      <template v-for="nodeName of Object.keys(getNodeTypes)" #[`node-${nodeName}`]="nodeProps" :key="`node-${nodeName}-${id}`">
+        <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
+      </template>
+      <template v-for="edgeName of Object.keys(getEdgeTypes)" #[`edge-${edgeName}`]="edgeProps" :key="`edge-${edgeName}-${id}`">
+        <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
+      </template>
+      <template #connection-line="customConnectionLineProps">
+        <slot name="connection-line" v-bind="customConnectionLineProps" />
+      </template>
+      <slot name="zoom-pane" />
+    </ZoomPane>
+    <slot />
+  </div>
+</template>
+<style>
+@import '../../style.css';
+</style>
@@ -0,0 +1,77 @@
+import { Ref } from 'vue'
+import { FlowProps, FlowStore, Node, Edge, Elements } from '~/types'
+
+const isDef = <T>(val: T): val is NonNullable<T> => typeof val !== 'undefined'
+export default (
+  {
+    modelValue,
+    nodes,
+    edges,
+  }: {
+    modelValue?: Ref<Elements | undefined>
+    nodes?: Ref<Node[] | undefined>
+    edges?: Ref<Edge[] | undefined>
+  },
+  props: FlowProps,
+  store: FlowStore,
+) => {
+  const scope = getCurrentScope()
+  scope?.run(() => {
+    if (isDefined(props.modelValue)) {
+      const { pause, resume } = pausableWatch([() => props.modelValue, () => props.modelValue?.length], async ([v]) => {
+        if (v && Array.isArray(v)) {
+          pause()
+          store.setElements(v)
+          if (modelValue) modelValue.value = [...store.nodes, ...store.edges]
+          await nextTick()
+          resume()
+        }
+      })
+    }
+    if (isDefined(props.nodes)) {
+      const { pause, resume } = pausableWatch([() => props.nodes, () => props.nodes?.length], async ([v]) => {
+        if (v && Array.isArray(v)) {
+          pause()
+          store.setNodes(v)
+          if (nodes) nodes.value = store.nodes
+          await nextTick()
+          resume()
+        }
+      })
+    }
+    if (isDefined(props.edges)) {
+      const { pause, resume } = pausableWatch([() => props.edges, () => props.edges?.length], async ([v]) => {
+        if (v && Array.isArray(v)) {
+          pause()
+          store.setEdges(v)
+          if (edges) edges.value = store.edges
+          await nextTick()
+          resume()
+        }
+      })
+    }
+
+    watch(
+      () => props.maxZoom,
+      (v) => isDef(v) && store.setMaxZoom(v),
+      { immediate: isDef(props.maxZoom) },
+    )
+    watch(
+      () => props.minZoom,
+      (v) => isDef(v) && store.setMinZoom(v),
+      { immediate: isDef(props.minZoom) },
+    )
+
+    const skip = ['modelValue', 'edges', 'nodes', 'maxZoom', 'minZoom']
+    Object.keys(props).forEach((p) => {
+      if (!skip.includes(p)) {
+        const prop = props[p as keyof typeof props]
+        watch(
+          () => prop,
+          (v) => isDef(v) && ((store as any)[p] = v),
+          { immediate: isDef(prop) },
+        )
+      }
+    })
+  })
+}
@@ -0,0 +1,189 @@
+<script lang="ts" setup>
+import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
+import { pointer, select } from 'd3-selection'
+import { FlowTransform, PanOnScrollMode } from '../../types'
+import { useKeyPress, useVueFlow } from '../../composables'
+import { clamp, clampPosition } from '../../utils'
+import SelectionPane from '../SelectionPane/SelectionPane.vue'
+import TransformationPane from '../TransformationPane/TransformationPane.vue'
+
+const { id, store } = useVueFlow()
+const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
+
+const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
+  (prevTransform.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
+  (prevTransform.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
+  (prevTransform.zoom !== eventTransform.k && !isNaN(eventTransform.k))
+
+const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => ({
+  x: eventTransform.x,
+  y: eventTransform.y,
+  zoom: eventTransform.k,
+})
+
+const isWrappedWithClass = (event: Event, className: string | undefined) => (event.target as Element).closest(`.${className}`)
+
+const clampedZoom = clamp(store.defaultZoom, store.minZoom, store.maxZoom)
+const transform = ref({
+  ...clampPosition({ x: store.defaultPosition[0], y: store.defaultPosition[1] }, store.translateExtent),
+  zoom: clampedZoom,
+})
+const { width, height } = useElementBounding(zoomPaneEl)
+
+onMounted(() => {
+  const d3Zoom = zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent)
+  const d3Selection = select(zoomPaneEl.value).call(d3Zoom)
+  const d3ZoomHandler = d3Selection.on('wheel.zoom')
+
+  const updatedTransform = zoomIdentity.translate(transform.value.x, transform.value.y).scale(transform.value.zoom)
+  d3Zoom.transform(d3Selection, updatedTransform)
+
+  store.setState({
+    d3Zoom,
+    d3Selection,
+    d3ZoomHandler,
+    transform: [updatedTransform.x, updatedTransform.y, updatedTransform.k],
+  })
+
+  const selectionKeyPressed = useKeyPress(store.selectionKeyCode, (keyPress) => {
+    if (keyPress) {
+      d3Zoom.on('zoom', null)
+    } else {
+      d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+        store.setState({ transform: [event.transform.x, event.transform.y, event.transform.k] })
+        const flowTransform = eventToFlowTransform(event.transform)
+        store.hooks.move.trigger({ event, flowTransform })
+      })
+    }
+  })
+
+  const zoomKeyPressed = useKeyPress(store.zoomActivationKeyCode)
+
+  d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+    const flowTransform = eventToFlowTransform(event.transform)
+    transform.value = flowTransform
+    store.hooks.moveStart.trigger({ event, flowTransform })
+  })
+
+  d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+    if (viewChanged(transform.value, event.transform)) {
+      const flowTransform = eventToFlowTransform(event.transform)
+      transform.value = flowTransform
+      store.hooks.moveEnd.trigger({ event, flowTransform })
+    }
+  })
+
+  d3Selection
+    ?.on('wheel', (event: WheelEvent) => {
+      if (store.panOnScroll && !zoomKeyPressed.value) {
+        if (isWrappedWithClass(event, store.noWheelClassName)) return
+        event.preventDefault()
+        event.stopImmediatePropagation()
+
+        const currentZoom = d3Selection?.property('__zoom').k || 1
+
+        if (event.ctrlKey && store.zoomOnPinch) {
+          const point = pointer(event)
+          // taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
+          const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10
+          const zoom = currentZoom * Math.pow(2, pinchDelta)
+          if (d3Selection) d3Zoom.scaleTo(d3Selection, zoom, point)
+
+          return
+        }
+
+        // increase scroll speed in firefox
+        // firefox: deltaMode === 1; chrome: deltaMode === 0
+        const deltaNormalize = event.deltaMode === 1 ? 20 : 1
+        const deltaX = store.panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
+        const deltaY = store.panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
+
+        if (d3Selection && store.panOnScrollSpeed)
+          d3Zoom?.translateBy(
+            d3Selection,
+            -(deltaX / currentZoom) * store.panOnScrollSpeed,
+            -(deltaY / currentZoom) * store.panOnScrollSpeed,
+          )
+      } else {
+        if (
+          (!store.zoomOnScroll && store.preventScrolling) ||
+          !store.preventScrolling ||
+          isWrappedWithClass(event, store.noWheelClassName)
+        )
+          return null
+        event.preventDefault()
+      }
+    })
+    .on('wheel.zoom', store.panOnScroll || typeof d3ZoomHandler === 'undefined' ? null : (d3ZoomHandler as any))
+
+  d3Zoom.filter((event: MouseEvent) => {
+    const zoomScroll = zoomKeyPressed.value || store.zoomOnScroll
+    const pinchZoom = store.zoomOnPinch && event.ctrlKey
+
+    // if all interactions are disabled, we prevent all zoom events
+    if (!store.panOnDrag && !zoomScroll && !store.panOnScroll && !store.zoomOnDoubleClick && !store.zoomOnPinch) return false
+
+    // during a selection we prevent all other interactions
+    if (selectionKeyPressed.value) return false
+
+    // if zoom on double click is disabled, we prevent the double click event
+    if (!store.zoomOnDoubleClick && event.type === 'dblclick') return false
+
+    // if the target element is inside an element with the nowheel class, we prevent zooming
+    if (isWrappedWithClass(event, store.noWheelClassName) && event.type === 'wheel') return false
+
+    // if the target element is inside an element with the nopan class, we prevent panning
+    if (isWrappedWithClass(event, store.noPanClassName) && event.type !== 'wheel') return false
+
+    if (!store.zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
+
+    // when there is no scroll handling enabled, we prevent all wheel events
+    if (!zoomScroll && !store.panOnScroll && !pinchZoom && event.type === 'wheel') return false
+
+    // if the pane is not movable, we prevent dragging it with mousestart or touchstart
+    if (!store.panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) return false
+
+    // default filter for d3-zoom
+    return (!event.ctrlKey || event.type === 'wheel') && !event.button
+  })
+})
+
+watch(
+  [width, height],
+  ([newWidth, newHeight]) => {
+    store.dimensions.width = newWidth
+    store.dimensions.height = newHeight
+  },
+  { immediate: true },
+)
+</script>
+<script lang="ts">
+export default {
+  name: 'ZoomPane',
+}
+</script>
+<template>
+  <div ref="zoomPane" class="vue-flow__renderer vue-flow__container">
+    <TransformationPane>
+      <template
+        v-for="nodeName of Object.keys(store.getNodeTypes)"
+        #[`node-${nodeName}`]="nodeProps"
+        :key="`node-${nodeName}-${id}`"
+      >
+        <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
+      </template>
+      <template
+        v-for="edgeName of Object.keys(store.getEdgeTypes)"
+        #[`edge-${edgeName}`]="edgeProps"
+        :key="`edge-${edgeName}-${id}`"
+      >
+        <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
+      </template>
+      <template #connection-line="customConnectionLineProps">
+        <slot name="connection-line" v-bind="customConnectionLineProps" />
+      </template>
+      <slot />
+    </TransformationPane>
+    <SelectionPane :key="`selection-pane-${id}`" />
+  </div>
+</template>
@@ -0,0 +1,7 @@
+export { default as VueFlow } from './VueFlow/VueFlow.vue'
+export { default as EdgeRenderer } from './EdgeRenderer/EdgeRenderer.vue'
+export { default as Marker } from './EdgeRenderer/Marker.vue'
+export { default as MarkerDefinitions } from './EdgeRenderer/MarkerDefinitions.vue'
+export { default as NodeRenderer } from './NodeRenderer/NodeRenderer.vue'
+export { default as ZoomPane } from './ZoomPane/ZoomPane.vue'
+export { default as SelectionPane } from './SelectionPane/SelectionPane.vue'