feat(additional-components): add zoomable and pannable to mini map

packages/additional-components/package.json

@@ -32,7 +32,12 @@
     "vue": "^3.2.37",
     "@vue-flow/core": "^1.0.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@types/d3-selection": "^3.0.3",
+    "@types/d3-zoom": "^3.0.1",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0"
+  },
   "devDependencies": {
     "@vue-flow/core": "workspace:*",
     "@vitejs/plugin-vue": "^2.3.4",

packages/additional-components/src/minimap/MiniMap.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import type { GraphNode } from '@vue-flow/core'
 import { getBoundsofRects, getConnectedEdges, getRectOfNodes, useVueFlow } from '@vue-flow/core'
+import { zoom, zoomIdentity } from 'd3-zoom'
+import type { D3ZoomEvent } from 'd3-zoom'
+import { pointer, select } from 'd3-selection'
 import type { PanelPosition } from '../panel'
 import { Panel } from '../panel'
 import type { MiniMapNodeFunc, MiniMapProps, ShapeRendering } from './types'
@@ -9,37 +12,44 @@ import MiniMapNode from './MiniMapNode'
 const {
   width,
   height,
-  nodeStrokeColor = '#555',
-  nodeColor = '#fff',
+  nodeStrokeColor = 'transparent',
+  nodeColor = '#e2e2e2',
   nodeClassName,
   nodeBorderRadius = 5,
   nodeStrokeWidth = 2,
-  maskColor = 'rgb(240, 242, 243, 0.7)',
+  maskColor = 'rgb(240, 240, 240, 0.6)',
   position = 'bottom-right' as PanelPosition,
+  pannable = false,
+  zoomable = false,
 } = defineProps<MiniMapProps>()
 
-const emit = defineEmits(['nodeClick', 'nodeDblclick', 'nodeMouseenter', 'nodeMousemove', 'nodeMouseleave'])
+const emit = defineEmits(['click', 'nodeClick', 'nodeDblclick', 'nodeMouseenter', 'nodeMousemove', 'nodeMouseleave'])
 
 const attrs: Record<string, any> = useAttrs()
 
 const defaultWidth = 200
 const defaultHeight = 150
 
-const { id, edges, viewport, dimensions, emits, getNodes } = useVueFlow()
+const { id, edges, viewport, dimensions, emits, getNodes, d3Selection, d3Zoom } = useVueFlow()
+
+const el = ref<SVGElement>()
 
 const elementWidth = computed(() => width ?? attrs.style?.width ?? defaultWidth)
 
 const elementHeight = computed(() => height ?? attrs.style?.height ?? defaultHeight)
 
-const nodeColorFunc: MiniMapNodeFunc = nodeColor instanceof Function ? nodeColor : () => nodeColor as string
-
-const nodeStrokeColorFunc: MiniMapNodeFunc =
-  nodeStrokeColor instanceof Function ? nodeStrokeColor : () => nodeStrokeColor as string
-
-const nodeClassNameFunc = nodeClassName instanceof Function ? nodeClassName : ((() => nodeClassName) as MiniMapNodeFunc)
-
 const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
+const nodeColorFunc = computed<MiniMapNodeFunc>(() => (nodeColor instanceof Function ? nodeColor : () => nodeColor as string))
+
+const nodeStrokeColorFunc = computed<MiniMapNodeFunc>(() =>
+  nodeStrokeColor instanceof Function ? nodeStrokeColor : () => nodeStrokeColor as string,
+)
+
+const nodeClassNameFunc = computed<MiniMapNodeFunc>(() =>
+  nodeClassName instanceof Function ? nodeClassName : ((() => nodeClassName) as MiniMapNodeFunc),
+)
+
 const bb = computed(() => getRectOfNodes(getNodes.value))
 
 const viewBB = computed(() => ({
@@ -49,26 +59,33 @@ const viewBB = computed(() => ({
   height: dimensions.value.height / viewport.value.zoom,
 }))
 
+const boundingRect = computed(() => (getNodes && getNodes.value.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value))
+
+const viewScale = computed(() => {
+  const scaledWidth = boundingRect.value.width / elementWidth.value
+  const scaledHeight = boundingRect.value.height / elementHeight.value
+
+  return Math.max(scaledWidth, scaledHeight)
+})
+
 const viewBox = computed(() => {
-  const boundingRect = getNodes && getNodes.value.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value
-  const scaledWidth = boundingRect.width / elementWidth.value
-  const scaledHeight = boundingRect.height / elementHeight.value
-  const viewScale = Math.max(scaledWidth, scaledHeight)
-  const viewWidth = viewScale * elementWidth.value
-  const viewHeight = viewScale * elementHeight.value
-  const offset = 5 * viewScale
+  const viewWidth = viewScale.value * elementWidth.value
+  const viewHeight = viewScale.value * elementHeight.value
+  const offset = 5 * viewScale.value
+
   return {
     offset,
-    x: boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset,
-    y: boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset,
+    x: boundingRect.value.x - (viewWidth - boundingRect.value.width) / 2 - offset,
+    y: boundingRect.value.y - (viewHeight - boundingRect.value.height) / 2 - offset,
     width: viewWidth + offset * 2,
     height: viewHeight + offset * 2,
   }
 })
 
 const d = computed(() => {
-  if (viewBox.value.x && viewBox.value.y) {
-    return `
+  if (!viewBox.value.x || !viewBox.value.y) return ''
+
+  return `
     M${viewBox.value.x - viewBox.value.offset},${viewBox.value.y - viewBox.value.offset}
     h${viewBox.value.width + viewBox.value.offset * 2}
     v${viewBox.value.height + viewBox.value.offset * 2}
@@ -77,11 +94,59 @@ const d = computed(() => {
     h${viewBB.value.width}
     v${viewBB.value.height}
     h${-viewBB.value.width}z`
-  } else {
-    return ''
-  }
 })
 
+watchEffect(
+  (onCleanup) => {
+    if (el.value) {
+      const selection = select(el.value as Element)
+
+      const zoomHandler = (event: D3ZoomEvent<SVGSVGElement, any>) => {
+        if (event.sourceEvent.type !== 'wheel' || !d3Selection.value || !d3Zoom.value) {
+          return
+        }
+
+        const pinchDelta =
+          -event.sourceEvent.deltaY * (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) * 10
+        const zoom = viewport.value.zoom * 2 ** pinchDelta
+
+        d3Zoom.value.scaleTo(d3Selection.value, zoom)
+      }
+
+      const panHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
+        if (event.sourceEvent.type !== 'mousemove' || !d3Selection.value || !d3Zoom.value) {
+          return
+        }
+
+        const position = {
+          x: viewport.value.x - event.sourceEvent.movementX * viewScale.value * Math.max(1, viewport.value.zoom),
+          y: viewport.value.y - event.sourceEvent.movementY * viewScale.value * Math.max(1, viewport.value.zoom),
+        }
+
+        const nextTransform = zoomIdentity.translate(position.x, position.y).scale(viewport.value.zoom)
+
+        d3Zoom.value.transform(d3Selection.value, nextTransform)
+      }
+
+      const zoomAndPanHandler = zoom()
+        .on('zoom', pannable ? panHandler : () => {})
+        .on('zoom.wheel', zoomable ? zoomHandler : () => {})
+
+      selection.call(zoomAndPanHandler)
+
+      onCleanup(() => {
+        selection.on('zoom', null)
+      })
+    }
+  },
+  { flush: 'post' },
+)
+
+const onSvgClick = (event: MouseEvent) => {
+  const [x, y] = pointer(event)
+  emit('click', { event, position: { x, y } })
+}
+
 const onNodeClick = (event: MouseEvent, node: GraphNode) => {
   const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeClick(param)
@@ -120,15 +185,17 @@ export default {
 </script>
 
 <template>
-  <Panel :position="position" class="vue-flow__minimap">
+  <Panel :position="position" class="vue-flow__minimap" :class="{ pannable, zoomable }">
     <svg
+      ref="el"
       :width="elementWidth"
       :height="elementHeight"
       :viewBox="[viewBox.x, viewBox.y, viewBox.width, viewBox.height].join(' ')"
       role="img"
       :aria-labelledby="`vue-flow__minimap-${id}`"
+      @click="onSvgClick"
     >
-      <title :id="`vue-flow__minimap-${id}`">Vue Flow mini map</title>
+      <title :id="`vue-flow__minimap-${id}`">Vue Flow mini map {{ id }}</title>
       <MiniMapNode
         v-for="node of getNodes"
         :id="node.id"
@@ -164,7 +231,8 @@ export default {
           :shape-rendering="shapeRendering"
         />
       </MiniMapNode>
-      <path class="vue-flow__minimap-mask" :d="d" :fill="maskColor" fill-rule="evenodd" />
+
+      <path class="vue-flow__minimap-mask" :style="pannable ? 'cursor: grab' : ''" :d="d" :fill="maskColor" fill-rule="evenodd" />
     </svg>
   </Panel>
 </template>

packages/additional-components/src/minimap/types.ts

@@ -25,8 +25,13 @@ export interface MiniMapProps {
   maskColor?: string
   /** Position of the minimap {@link PanelPosition} */
   position?: PanelPosition
+  /** Enable drag minimap to drag viewport */
+  pannable?: boolean
+  /** Enable zoom minimap to zoom viewport */
+  zoomable?: boolean
 
   width?: number
+
   height?: number
 }