refactor(minimap)!: use xy minimap instance

.changeset/seven-ads-wait.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/minimap": minor
+---
+
+Replace d3 with xyflow minimap instance

docs/src/guide/vue-flow/config.md

@@ -498,7 +498,7 @@ const edges = ref([
 
 ### default-viewport (optional)
 
-- Type: [`ViewportTransform`](/typedocs/interfaces/ViewportTransform)
+- Type: `Viewport`
 
 - Default: `{ zoom: 1, position: { x: 0, y: 0 } }`
 

packages/core/package.json

@@ -73,7 +73,7 @@
     "@vueuse/core": "^10.5.0",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
-    "@xyflow/system": "^0.0.36"
+    "@xyflow/system": "^0.0.37"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.3",

packages/core/src/index.ts

@@ -67,3 +67,6 @@ export { useKeyPress } from './composables/useKeyPress'
 export { VueFlowError, ErrorCode, isErrorOfType } from './utils/errors'
 
 export * from './types'
+
+// todo: add more re-exports
+export { type Viewport } from '@xyflow/system'

packages/minimap/package.json

@@ -61,15 +61,12 @@
     "vue": "^3.3.0"
   },
   "dependencies": {
-    "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0"
+    "@xyflow/system": "^0.0.37"
   },
   "devDependencies": {
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
     "@tooling/vite-config": "workspace:*",
-    "@types/d3-selection": "^3.0.7",
-    "@types/d3-zoom": "^3.0.5",
     "@vue-flow/core": "workspace:*",
     "vue-tsc": "^1.8.16"
   },

packages/minimap/src/MiniMap.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import type { CoordinateExtent, GraphNode, PanelPosition } from '@vue-flow/core'
+import type { GraphNode, PanelPosition } from '@vue-flow/core'
 import { Panel, 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 { computed, provide, ref, toRef, useAttrs, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, provide, ref, toRef, useAttrs, watch } from 'vue'
+import type { XYMinimapInstance } from '@xyflow/system'
+import { XYMinimap } from '@xyflow/system'
 import type { MiniMapEmits, MiniMapNodeFunc, MiniMapProps, MiniMapSlots, ShapeRendering } from './types'
 import MiniMapNode from './MiniMapNode.vue'
 import { Slots } from './types'
@@ -39,10 +38,12 @@ const attrs: Record<string, any> = useAttrs()
 const defaultWidth = 200
 const defaultHeight = 150
 
-const { id, edges, viewport, translateExtent, dimensions, emits, d3Selection, d3Zoom, getNodesInitialized } = useVueFlow()
+const { id, edges, viewport, translateExtent, dimensions, emits, panZoom, getNodesInitialized } = useVueFlow()
 
 const el = ref<SVGElement>()
 
+let minimapInstance: XYMinimapInstance | null = null
+
 provide(Slots, slots)
 
 const elementWidth = toRef(() => width ?? attrs.style?.width ?? defaultWidth)
@@ -116,64 +117,54 @@ const d = computed(() => {
     a${maskBorderRadius},${maskBorderRadius} 0 0 1 ${maskBorderRadius},-${maskBorderRadius}z`
 })
 
-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) *
-          zoomStep
-        const zoom = viewport.value.zoom * 2 ** pinchDelta
-
-        d3Zoom.value.scaleTo(d3Selection.value, zoom)
+onMounted(() => {
+  watch(
+    panZoom,
+    (panZoomInstance) => {
+      if (el.value && panZoomInstance) {
+        minimapInstance = XYMinimap({
+          domNode: el.value,
+          panZoom: panZoomInstance,
+          getTransform: () => [viewport.value.x, viewport.value.y, viewport.value.zoom],
+          getViewScale: () => viewScale.value,
+        })
       }
-
-      const panHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
-        if (event.sourceEvent.type !== 'mousemove' || !d3Selection.value || !d3Zoom.value) {
-          return
-        }
-
-        const moveScale = viewScale.value * Math.max(1, viewport.value.zoom) * (inversePan ? -1 : 1)
-
-        const position = {
-          x: viewport.value.x - event.sourceEvent.movementX * moveScale,
-          y: viewport.value.y - event.sourceEvent.movementY * moveScale,
-        }
-
-        const extent: CoordinateExtent = [
-          [0, 0],
-          [dimensions.value.width, dimensions.value.height],
-        ]
-
-        const nextTransform = zoomIdentity.translate(position.x, position.y).scale(viewport.value.zoom)
-        const constrainedTransform = d3Zoom.value.constrain()(nextTransform, extent, translateExtent.value)
-
-        d3Zoom.value.transform(d3Selection.value, constrainedTransform)
-      }
-
-      const zoomAndPanHandler = zoom()
-        .on('zoom', pannable ? panHandler : () => {})
-        .on('zoom.wheel', zoomable ? zoomHandler : () => {})
-
-      selection.call(zoomAndPanHandler)
-
-      onCleanup(() => {
-        selection.on('zoom', null)
+    },
+    { immediate: true },
+  )
+
+  onUnmounted(() => {
+    minimapInstance?.destroy()
+  })
+
+  watch(
+    [
+      () => pannable,
+      () => zoomable,
+      () => inversePan,
+      () => zoomStep,
+      translateExtent,
+      () => dimensions.value.height,
+      () => dimensions.value.width,
+    ],
+    () => {
+      minimapInstance?.update({
+        translateExtent: translateExtent.value,
+        width: dimensions.value.width,
+        height: dimensions.value.height,
+        inversePan,
+        pannable,
+        zoomStep,
+        zoomable,
       })
-    }
-  },
-  { flush: 'post' },
-)
+    },
+    { immediate: true },
+  )
+})
 
 function onSvgClick(event: MouseEvent) {
-  const [x, y] = pointer(event)
+  const [x, y] = minimapInstance?.pointer(event) || [0, 0]
+
   emit('click', { event, position: { x, y } })
 }
 

packages/node-toolbar/package.json

@@ -48,6 +48,7 @@
     "@tooling/tsconfig": "workspace:*",
     "@tooling/vite-config": "workspace:*",
     "@vue-flow/core": "workspace:*",
+    "@xyflow/system": "^0.0.37",
     "vue-tsc": "^1.8.16"
   },
   "publishConfig": {

packages/node-toolbar/src/NodeToolbar.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed, inject, toRef } from 'vue'
-import type { GraphNode, Rect, ViewportTransform } from '@vue-flow/core'
+import type { Viewport } from '@xyflow/system'
+import type { GraphNode, Rect } from '@vue-flow/core'
 import { NodeIdInjection, Position, getRectOfNodes, useVueFlow } from '@vue-flow/core'
 
 import type { CSSProperties } from 'vue'
@@ -46,7 +47,7 @@ const wrapperStyle = computed<CSSProperties>(() => ({
   zIndex: zIndex.value,
 }))
 
-function getTransform(nodeRect: Rect, transform: ViewportTransform, position: Position, offset: number, align: Align): string {
+function getTransform(nodeRect: Rect, viewport: Viewport, position: Position, offset: number, align: Align): string {
   let alignmentOffset = 0.5
 
   if (align === 'start') {
@@ -58,28 +59,28 @@ function getTransform(nodeRect: Rect, transform: ViewportTransform, position: Po
   // position === Position.Top
   // we set the x any y position of the toolbar based on the nodes position
   let pos = [
-    (nodeRect.x + nodeRect.width * alignmentOffset) * transform.zoom + transform.x,
-    nodeRect.y * transform.zoom + transform.y - offset,
+    (nodeRect.x + nodeRect.width * alignmentOffset) * viewport.zoom + viewport.x,
+    nodeRect.y * viewport.zoom + viewport.y - offset,
   ]
   // and then shift it based on the alignment. The shift values are in %.
   let shift = [-100 * alignmentOffset, -100]
 
   switch (position) {
     case Position.Right:
       pos = [
-        (nodeRect.x + nodeRect.width) * transform.zoom + transform.x + offset,
-        (nodeRect.y + nodeRect.height * alignmentOffset) * transform.zoom + transform.y,
+        (nodeRect.x + nodeRect.width) * viewport.zoom + viewport.x + offset,
+        (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y,
       ]
       shift = [0, -100 * alignmentOffset]
       break
     case Position.Bottom:
-      pos[1] = (nodeRect.y + nodeRect.height) * transform.zoom + transform.y + offset
+      pos[1] = (nodeRect.y + nodeRect.height) * viewport.zoom + viewport.y + offset
       shift[1] = 0
       break
     case Position.Left:
       pos = [
-        nodeRect.x * transform.zoom + transform.x - offset,
-        (nodeRect.y + nodeRect.height * alignmentOffset) * transform.zoom + transform.y,
+        nodeRect.x * viewport.zoom + viewport.x - offset,
+        (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y,
       ]
       shift = [-100, -100 * alignmentOffset]
       break