feat(additional-components): add maskStrokeColor and maskStrokeWidth props to MiniMap

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>

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 */

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);