fix: Minimap

examples/Hidden/HiddenExample.vue

@@ -16,17 +16,11 @@ const isHidden = ref<boolean>(false)
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 
 watchEffect(() => {
-  console.log(isHidden.value)
   elements.value = elements.value.map((e) => {
     e.isHidden = isHidden.value
     return e
   })
 })
-
-const toggle = (event: any) => {
-  console.log(event.target)
-  isHidden.value = event.target?.checked
-}
 </script>
 <template>
   <Flow :elements="elements" :on-connect="onConnect">

src/additional-components/MiniMap/MiniMap.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
 import MiniMapNode from './MiniMapNode.vue'
-import { getRectOfNodes, getBoundsofRects } from '~/utils/graph'
+import { getBoundsofRects, getRectOfNodes } from '~/utils/graph'
-import { Node, Rect, RevueFlowStore } from '~/types'
+import { Node, RevueFlowStore } from '~/types'
 
 type StringFunc = (node: Node) => string
 
@@ -31,48 +31,56 @@ const defaultWidth = 200
 const defaultHeight = 150
 
 const store = inject<RevueFlowStore>('store')!
-const transform = computed(() => store.transform)
+
-const elementWidth = computed(() => (attrs.style?.width ?? defaultWidth)! as number)
+const elementWidth = attrs.style?.width ?? defaultWidth
-const elementHeight = computed(() => (attrs.style?.height ?? defaultHeight)! as number)
+const elementHeight = attrs.style?.height ?? defaultHeight
-const nodeColorFunc = computed(
+const nodeColorFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as StringFunc
-  () => (props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor) as StringFunc,
+const nodeStrokeColorFunc =
-)
+  props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as StringFunc
-const nodeStrokeColorFunc = computed(
+
-  () => (props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor) as StringFunc,
+const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
-)
+
-const nodeClassNameFunc = computed(
-  () => (props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName) as StringFunc,
-)
-const hasNodes = computed(() => store.nodes && store.nodes.length)
-const bb = computed(() => getRectOfNodes(store.nodes))
-const viewBB = computed<Rect>(() => ({
-  x: -transform.value[0] / transform.value[2],
-  y: -transform.value[1] / transform.value[2],
-  width: store.width / transform.value[2],
-  height: store.height / transform.value[2],
-}))
-const boundingRect = computed(() => (hasNodes.value ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value))
-const scaledWidth = computed(() => boundingRect.value.width / elementWidth.value)
-const scaledHeight = computed(() => boundingRect.value.height / elementHeight.value)
-const viewScale = computed(() => Math.max(scaledWidth.value, scaledHeight.value))
-const viewWidth = computed(() => viewScale.value * elementWidth.value)
-const viewHeight = computed(() => viewScale.value * elementHeight.value)
-const offset = computed(() => 5 * viewScale.value)
-const x = computed(() => boundingRect.value.x - (viewWidth.value - boundingRect.value.width) / 2 - offset.value)
-const y = computed(() => boundingRect.value.y - (viewHeight.value - boundingRect.value.height) / 2 - offset.value)
-const width = computed(() => viewWidth.value + offset.value * 2)
-const height = computed(() => viewHeight.value + offset.value * 2)
 const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
+
+const viewBox = computed(() => {
+  const bb = getRectOfNodes(store.nodes)
+  const viewBB = {
+    x: -store.transform[0] / store.transform[2],
+    y: -store.transform[1] / store.transform[2],
+    width: store.dimensions.width / store.transform[2],
+    height: store.dimensions.height / store.transform[2],
+  }
+  const boundingRect = store.nodes && store.nodes.length ? getBoundsofRects(bb, viewBB) : viewBB
+  const scaledWidth = boundingRect.width / elementWidth
+  const scaledHeight = boundingRect.height / elementHeight
+  const viewScale = Math.max(scaledWidth, scaledHeight)
+  const viewWidth = viewScale * elementWidth
+  const viewHeight = viewScale * elementHeight
+  const offset = 5 * viewScale
+  return {
+    viewBB,
+    offset,
+    x: boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset,
+    y: boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset,
+    width: viewWidth + offset * 2,
+    height: viewHeight + offset * 2,
+  }
+})
 </script>
 <template>
-  <svg :width="elementWidth" :height="elementHeight" :viewBox="`${x} ${y} ${width} ${height}`" class="revue-flow__minimap">
+  <svg
+    :width="elementWidth"
+    :height="elementHeight"
+    :viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"
+    class="revue-flow__minimap"
+  >
     <template v-for="(node, i) of store.nodes" :key="`mini-map-node-${i}`">
       <MiniMapNode
         v-if="!node.isHidden"
         :x="node.__rf.position.x"
         :y="node.__rf.position.y"
-        :width="node.__rf.width || 0"
+        :width="node.__rf.width"
-        :height="node.__rf.height || 0"
+        :height="node.__rf.height"
         :style="node.style"
         :class="nodeClassNameFunc(node)"
         :color="nodeColorFunc(node)"
@@ -84,8 +92,11 @@ const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crisp
     </template>
     <path
       class="revue-flow__minimap-mask"
-      :d="`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+      :d="`
-      M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`"
+      M${viewBox.x - viewBox.offset},${viewBox.y - viewBox.offset}h${viewBox.width + viewBox.offset * 2}
+      v${viewBox.height + viewBox.offset * 2}
+      h${-viewBox.width - viewBox.offset * 2}z
+      M${viewBox.viewBB.x},${viewBox.viewBB.y}h${viewBox.viewBB.width}v${viewBox.viewBB.height}h${-viewBox.viewBB.width}z`"
       :fill="props.maskColor"
       fill-rule="evenodd"
     />

src/container/Flow/Flow.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import '~/style.css'
 import '~/theme-default.css'
-import { CSSProperties, onBeforeUnmount, watchPostEffect } from 'vue'
+import { CSSProperties, onBeforeUnmount } from 'vue'
 import ZoomPane from '~/container/ZoomPane/ZoomPane.vue'
 import SelectionPane from '~/container/SelectionPane/SelectionPane.vue'
 import NodeRenderer from '~/container/NodeRenderer/NodeRenderer.vue'
@@ -125,15 +125,18 @@ if (!store) {
   provide<RevueFlowStore>('store', store)
 }
 
-onBeforeUnmount(() => store?.$dispose())
+const init = () => {
-
-watchPostEffect(() => {
   store.setElements(props.elements)
   store.setMinZoom(props.minZoom)
   store.setMaxZoom(props.maxZoom)
   store.setTranslateExtent(props.translateExtent)
   store.setNodeExtent(props.nodeExtent)
-})
+}
+
+onBeforeUnmount(() => store?.$dispose())
+
+onUpdated(() => init())
+init()
 
 const hooks = useRevueFlow().bind(emit)
 provide<RevueFlowHooks>('hooks', hooks)

src/types/types.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, HTMLAttributes } from 'vue'
 import { Edge, EdgeType } from './edge'
 import { Node, NodeExtent, NodeType, TranslateExtent } from './node'
-import { ConnectionLineComponent, ConnectionLineType, ConnectionMode } from '~/types/connection'
+import { CustomConnectionLine, ConnectionLineType, ConnectionMode } from '~/types/connection'
 import { KeyCode, PanOnScrollMode } from '~/types/panel'
 
 export type ElementId = string
@@ -29,6 +29,11 @@ export interface Dimensions {
   height: number
 }
 
+export interface Box extends XYPosition {
+  x2: number
+  y2: number
+}
+
 export interface Rect extends Dimensions, XYPosition {}
 
 export type SnapGrid = [number, number]
@@ -85,13 +90,13 @@ export type OnLoadParams<T = any> = {
 
 export type OnLoadFunc<T = any> = (params: OnLoadParams<T>) => void
 
-export interface RevueFlowOptions extends Omit<HTMLAttributes, 'onLoad'> {
+export interface FlowOptions extends Omit<HTMLAttributes, 'onLoad'> {
   nodeTypes?: Record<string, NodeType>
   edgeTypes?: Record<string, EdgeType>
   connectionMode?: ConnectionMode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
-  connectionLineComponent?: ConnectionLineComponent
+  connectionLineComponent?: CustomConnectionLine
   deleteKeyCode?: KeyCode
   selectionKeyCode?: KeyCode
   multiSelectionKeyCode?: KeyCode