fix(minimap): hide minimap node if graph node is hidden (#1739)

* fix(minimap): hide minimap node if graph node is hidden

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

.changeset/three-phones-grow.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/minimap": patch
+---
+
+Hide minimap node when graph node is hidden.

packages/minimap/src/MiniMap.vue

@@ -244,6 +244,7 @@ export default {
         :stroke-width="nodeStrokeWidth"
         :shape-rendering="shapeRendering"
         :type="node.type"
+        :hidden="node.hidden"
         @click="onNodeClick($event, node)"
         @dblclick="onNodeDblClick($event, node)"
         @mouseenter="onNodeMouseEnter($event, node)"

packages/minimap/src/MiniMapNode.vue

@@ -43,27 +43,29 @@ export default {
 </script>
 
 <template>
-  <component :is="miniMapSlots[`node-${props.type}`]" v-if="miniMapSlots[`node-${props.type}`]" v-bind="props" />
+  <template v-if="!hidden && dimensions.width !== 0 && dimensions.height !== 0">
+    <component :is="miniMapSlots[`node-${props.type}`]" v-if="miniMapSlots[`node-${props.type}`]" v-bind="props" />
 
-  <rect
+    <rect
-    v-else
+      v-else
-    :id="id"
+      :id="id"
-    class="vue-flow__minimap-node"
+      class="vue-flow__minimap-node"
-    :class="{ selected, dragging }"
+      :class="{ selected, dragging }"
-    :x="position.x"
+      :x="position.x"
-    :y="position.y"
+      :y="position.y"
-    :rx="borderRadius"
+      :rx="borderRadius"
-    :ry="borderRadius"
+      :ry="borderRadius"
-    :width="dimensions.width"
+      :width="dimensions.width"
-    :height="dimensions.height"
+      :height="dimensions.height"
-    :fill="color || (style.background as string) || style.backgroundColor"
+      :fill="color || (style.background as string) || style.backgroundColor"
-    :stroke="strokeColor"
+      :stroke="strokeColor"
-    :stroke-width="strokeWidth"
+      :stroke-width="strokeWidth"
-    :shape-rendering="shapeRendering"
+      :shape-rendering="shapeRendering"
-    @click="onClick"
+      @click="onClick"
-    @dblclick="onDblclick"
+      @dblclick="onDblclick"
-    @mouseenter="onMouseEnter"
+      @mouseenter="onMouseEnter"
-    @mousemove="onMouseMove"
+      @mousemove="onMouseMove"
-    @mouseleave="onMouseLeave"
+      @mouseleave="onMouseLeave"
-  />
+    />
+  </template>
 </template>

packages/minimap/src/types.ts

@@ -58,6 +58,7 @@ export interface MiniMapNodeProps {
   shapeRendering?: ShapeRendering
   strokeColor?: string
   strokeWidth?: number
+  hidden?: boolean
 }
 
 export interface MiniMapEmits {