From bd7fa3c14878f5ba23dda16d33dc771d040ea4fe Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 6 Nov 2022 10:59:19 +0100
Subject: [PATCH] feat(additional-components): add zoomable and pannable to
 mini map

---
 packages/additional-components/package.json   |   7 +-
 .../src/minimap/MiniMap.vue                   | 126 ++++++++++++++----
 .../src/minimap/types.ts                      |   5 +
 pnpm-lock.yaml                                |  12 +-
 4 files changed, 116 insertions(+), 34 deletions(-)

diff --git a/packages/additional-components/package.json b/packages/additional-components/package.json
index c47c1c17..2f855ddb 100644
--- a/packages/additional-components/package.json
+++ b/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",
diff --git a/packages/additional-components/src/minimap/MiniMap.vue b/packages/additional-components/src/minimap/MiniMap.vue
index 88eca5bc..530bb9e3 100644
--- a/packages/additional-components/src/minimap/MiniMap.vue
+++ b/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>
diff --git a/packages/additional-components/src/minimap/types.ts b/packages/additional-components/src/minimap/types.ts
index aa3f9f70..6263a5fd 100644
--- a/packages/additional-components/src/minimap/types.ts
+++ b/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
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 06e39de8..26a87012 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -163,8 +163,12 @@ importers:
 
   packages/additional-components:
     specifiers:
+      '@types/d3-selection': ^3.0.3
+      '@types/d3-zoom': ^3.0.1
       '@vitejs/plugin-vue': ^2.3.4
       '@vue-flow/core': workspace:*
+      d3-selection: ^3.0.0
+      d3-zoom: ^3.0.0
       unplugin-auto-import: ^0.11.2
       vite: ^2.9.15
       vite-plugin-vue-type-imports: 0.2.0
@@ -172,6 +176,10 @@ importers:
       vue: ^3.2.37
       vue-tsc: ^0.40.13
     dependencies:
+      '@types/d3-selection': 3.0.3
+      '@types/d3-zoom': 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
       vue: 3.2.40
     devDependencies:
       '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.40
@@ -1851,7 +1859,6 @@ packages:
 
   /@types/d3-color/3.1.0:
     resolution: {integrity: sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==}
-    dev: true
 
   /@types/d3-contour/3.0.1:
     resolution: {integrity: sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==}
@@ -1910,7 +1917,6 @@ packages:
     resolution: {integrity: sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==}
     dependencies:
       '@types/d3-color': 3.1.0
-    dev: true
 
   /@types/d3-path/3.0.0:
     resolution: {integrity: sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==}
@@ -1940,7 +1946,6 @@ packages:
 
   /@types/d3-selection/3.0.3:
     resolution: {integrity: sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==}
-    dev: true
 
   /@types/d3-shape/3.1.0:
     resolution: {integrity: sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==}
@@ -1971,7 +1976,6 @@ packages:
     dependencies:
       '@types/d3-interpolate': 3.0.1
       '@types/d3-selection': 3.0.3
-    dev: true
 
   /@types/d3/7.4.0:
     resolution: {integrity: sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==}