From e87bb535e3ee611d66159b99af1e287a8263a6dc Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 15 Nov 2022 17:10:01 +0100
Subject: [PATCH] feat(additional-components): add `maskStrokeColor` and
 `maskStrokeWidth` props to MiniMap

---
 .../additional-components/src/minimap/MiniMap.vue     | 11 ++++++++++-
 packages/additional-components/src/minimap/types.ts   |  6 +++++-
 packages/core/src/theme-default.css                   |  6 ++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/additional-components/src/minimap/MiniMap.vue b/packages/additional-components/src/minimap/MiniMap.vue
index 361bae70..8b3abf13 100644
--- a/packages/additional-components/src/minimap/MiniMap.vue
+++ b/packages/additional-components/src/minimap/MiniMap.vue
@@ -20,6 +20,8 @@ const {
   nodeStrokeWidth = 2,
   maskColor = 'rgb(240, 240, 240, 0.6)',
   position = 'bottom-right' as PanelPosition,
+  maskStrokeColor = 'none',
+  maskStrokeWidth = 1,
   pannable = false,
   zoomable = false,
 } = defineProps<MiniMapProps>()
@@ -221,7 +223,14 @@ export default {
         @mouseleave="onNodeMouseLeave($event, node)"
       />
 
-      <path class="vue-flow__minimap-mask" :style="pannable ? 'cursor: grab' : ''" :d="d" :fill="maskColor" fill-rule="evenodd" />
+      <path
+        class="vue-flow__minimap-mask"
+        :d="d"
+        :fill="maskColor"
+        :stroke="maskStrokeColor"
+        :stroke-width="maskStrokeWidth"
+        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 0176cba5..220db199 100644
--- a/packages/additional-components/src/minimap/types.ts
+++ b/packages/additional-components/src/minimap/types.ts
@@ -21,8 +21,12 @@ export interface MiniMapProps {
   nodeBorderRadius?: number
   /** Node stroke width */
   nodeStrokeWidth?: number
-  /** Background color of minimap */
+  /** Background color of minimap mask */
   maskColor?: string
+  /** Border color of minimap mask */
+  maskStrokeColor?: string
+  /** Border width of minimap mask */
+  maskStrokeWidth?: number
   /** Position of the minimap {@link PanelPosition} */
   position?: PanelPosition
   /** Enable drag minimap to drag viewport */
diff --git a/packages/core/src/theme-default.css b/packages/core/src/theme-default.css
index 23a988bd..5930312e 100644
--- a/packages/core/src/theme-default.css
+++ b/packages/core/src/theme-default.css
@@ -108,6 +108,12 @@
   background-color: #fff;
 }
 
+.vue-flow__minimap-mask {
+  &.pannable {
+    cursor: grab;
+   }
+}
+
 .vue-flow__controls {
   box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);