fix: zoom pan helper

src/additional-components/Background/Background.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
-import { BackgroundVariant, RevueFlowStore } from '~/types'
+import { BackgroundVariant } from '~/types'
+import { Store } from '~/context'
 
 export interface BackgroundProps extends HTMLAttributes {
   variant?: BackgroundVariant
@@ -20,14 +21,23 @@ const defaultColors: Record<BackgroundVariant, string> = {
   [BackgroundVariant.Lines]: '#eee',
 }
 
-const store = inject<RevueFlowStore>('store')!
+const store = inject(Store)!
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
 
 const bgClasses = ['revue-flow__background']
-const scaledGap = computed(() => props.gap && props.gap * store.transform[2])
-const xOffset = computed(() => scaledGap.value && store.transform[0] % scaledGap.value)
-const yOffset = computed(() => scaledGap.value && store.transform[1] % scaledGap.value)
-const size = computed(() => props.size || 0.4 * store.transform[2])
+const background = computed(() => {
+  const scaledGap = props.gap && props.gap * store.transform[2]
+  const xOffset = scaledGap && store.transform[0] % scaledGap
+  const yOffset = scaledGap && store.transform[1] % scaledGap
+  const size = props.size || 0.4 * store.transform[2]
+
+  return {
+    scaledGap,
+    xOffset,
+    yOffset,
+    size,
+  }
+})
 
 const isLines = props.variant === BackgroundVariant.Lines
 const bgColor = props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]
@@ -41,16 +51,23 @@ const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
       height: '100%',
     }"
   >
-    <pattern :id="patternId" :x="xOffset" :y="yOffset" :width="scaledGap" :height="scaledGap" patternUnits="userSpaceOnUse">
+    <pattern
+      :id="patternId"
+      :x="background.xOffset"
+      :y="background.yOffset"
+      :width="background.scaledGap"
+      :height="background.scaledGap"
+      patternUnits="userSpaceOnUse"
+    >
       <template v-if="isLines">
         <path
           :stroke="bgColor"
           :stroke-width="props.size"
-          :d="`M${scaledGap / 2} 0 V${scaledGap} M0 ${scaledGap / 2} H${scaledGap}`"
+          :d="`M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`"
         />
       </template>
       <template v-else>
-        <circle :cx="size" :cy="size" :r="size" :fill="bgColor" />
+        <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="bgColor" />
       </template>
     </pattern>
     <rect x="0" y="0" width="100%" height="100%" :fill="`url(#${patternId})`" />

src/additional-components/Controls/Controls.vue

@@ -6,8 +6,9 @@ import MinusIcon from '@/assets/icons/minus.svg'
 import Fitview from '@/assets/icons/fitview.svg'
 import Lock from '@/assets/icons/lock.svg'
 import Unlock from '@/assets/icons/unlock.svg'
-import { FitViewParams, RevueFlowStore, ZoomPanHelperFunctions } from '~/types'
-import useZoomPanHelper from '~/hooks/useZoomPanHelper'
+import { FitViewParams } from '~/types'
+import useZoomPanHelper from '~/composables/useZoomPanHelper'
+import { Store } from '~/context'
 
 export interface ControlProps extends HTMLAttributes {
   showZoom?: boolean
@@ -26,25 +27,24 @@ const props = withDefaults(defineProps<ControlProps>(), {
   showInteractive: true,
 })
 
-const store = inject<RevueFlowStore>('store')!
-// const { onReady } = useZoomPanHelper()
+const store = inject(Store)!
+const { zoomIn, zoomOut, fitView } = useZoomPanHelper()
 
 const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable
 const mapClasses = ['revue-flow__controls']
 
-/*
-* const onZoomInHandler = () => {
-  zoomHelper.value?.zoomIn?.()
+const onZoomInHandler = () => {
+  zoomIn?.()
   props.onZoomIn?.()
 }
 
 const onZoomOutHandler = () => {
-  zoomHelper.value?.zoomOut?.()
+  zoomOut?.()
   props.onZoomOut?.()
 }
 
 const onFitViewHandler = () => {
-  zoomHelper.value?.fitView?.(props.fitViewParams)
+  fitView?.(props.fitViewParams)
   props.onFitView?.()
 }
 
@@ -52,7 +52,6 @@ const onInteractiveChangeHandler = () => {
   store.setInteractive?.(!isInteractive)
   props.onInteractiveChange?.(!isInteractive)
 }
-*/
 </script>
 <template>
   <div :class="mapClasses">

src/additional-components/MiniMap/MiniMap.vue

@@ -2,7 +2,8 @@
 import { HTMLAttributes } from 'vue'
 import MiniMapNode from './MiniMapNode.vue'
 import { getBoundsofRects, getRectOfNodes } from '~/utils/graph'
-import { Node, RevueFlowStore } from '~/types'
+import { Node } from '~/types'
+import { Store } from '~/context'
 
 type StringFunc = (node: Node) => string
 
@@ -30,7 +31,7 @@ declare const window: any
 const defaultWidth = 200
 const defaultHeight = 150
 
-const store = inject<RevueFlowStore>('store')!
+const store = inject(Store)!
 
 const elementWidth = attrs.style?.width ?? defaultWidth
 const elementHeight = attrs.style?.height ?? defaultHeight

src/additional-components/MiniMap/MiniMapNode.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, CSSProperties } from 'vue'
+import { CSSProperties } from 'vue'
 
 interface MiniMapNodeProps {
   x?: number
@@ -8,11 +8,13 @@ interface MiniMapNodeProps {
   height?: number
   borderRadius?: number
   color?: string
-  shapeRendering?: string
+  shapeRendering?: 'auto' | 'optimizeSpeed' | 'crispEdges' | 'geometricPrecision' | 'inherit'
   strokeColor?: string
   strokeWidth?: number
 }
-const props = defineProps<MiniMapNodeProps>()
+const props = withDefaults(defineProps<MiniMapNodeProps>(), {
+  shapeRendering: 'geometricPrecision',
+})
 const attrs = useAttrs()
 
 const styles = (attrs.style ?? {}) as CSSProperties