Merge pull request #3874 from xyflow/minimap-style-fix

fixed minimap styling by props & mask-stroke-width

packages/react/src/additional-components/MiniMap/MiniMap.tsx

@@ -49,9 +49,10 @@ function MiniMapComponent({
   // We need to rename the prop to be `CapitalCase` so that JSX will render it as
   // a component properly.
   nodeComponent,
+  bgColor,
   maskColor,
-  maskStrokeColor = 'none',
+  maskStrokeColor,
-  maskStrokeWidth = 1,
+  maskStrokeWidth,
   position = 'bottom-right',
   onClick,
   onNodeClick,
@@ -130,7 +131,11 @@ function MiniMapComponent({
       style={
         {
           ...style,
-          '--xy-minimap-mask-color-props': typeof maskColor === 'string' ? maskColor : undefined,
+          '--xy-minimap-background-color-props': typeof bgColor === 'string' ? bgColor : undefined,
+          '--xy-minimap-mask-background-color-props': typeof maskColor === 'string' ? maskColor : undefined,
+          '--xy-minimap-mask-stroke-color-props': typeof maskStrokeColor === 'string' ? maskStrokeColor : undefined,
+          '--xy-minimap-mask-stroke-width-props':
+            typeof maskStrokeWidth === 'number' ? maskStrokeWidth * viewScale : undefined,
           '--xy-minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined,
           '--xy-minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined,
           '--xy-minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined,
@@ -143,6 +148,7 @@ function MiniMapComponent({
         width={elementWidth}
         height={elementHeight}
         viewBox={`${x} ${y} ${width} ${height}`}
+        className="react-flow__minimap-svg"
         role="img"
         aria-labelledby={labelledBy}
         ref={svg}
@@ -163,8 +169,6 @@ function MiniMapComponent({
           d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
         M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
           fillRule="evenodd"
-          stroke={maskStrokeColor}
-          strokeWidth={maskStrokeWidth}
           pointerEvents="none"
         />
       </svg>

packages/react/src/additional-components/MiniMap/types.ts

@@ -19,6 +19,8 @@ export type MiniMapProps<NodeType extends Node = Node> = Omit<HTMLAttributes<SVG
   nodeStrokeWidth?: number;
   /** Component used to render nodes on minimap */
   nodeComponent?: ComponentType<MiniMapNodeProps>;
+  /** Background color of minimap */
+  bgColor?: string;
   /** Color of mask representing viewport */
   maskColor?: string;
   /** Stroke color of mask representing viewport */

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -83,7 +83,7 @@
 
 <Panel
   {position}
-  {style}
+  style={style + (bgColor ? `;--xy-minimap-background-color-props:${bgColor}` : '')}
   class={cc(['svelte-flow__minimap', className])}
   data-testid="svelte-flow__minimap"
 >
@@ -92,12 +92,14 @@
       width={elementWidth}
       height={elementHeight}
       viewBox="{x} {y} {viewboxWidth} {viewboxHeight}"
+      class="svelte-flow__minimap-svg"
       role="img"
       aria-labelledby={labelledBy}
-      style:--xy-minimap-background-color-props={bgColor}
+      style:--xy-minimap-mask-background-color-props={maskColor}
-      style:--xy-minimap-mask-color-props={maskColor}
       style:--xy-minimap-mask-stroke-color-props={maskStrokeColor}
-      style:--xy-minimap-mask-stroke-width-props={maskStrokeWidth}
+      style:--xy-minimap-mask-stroke-width-props={maskStrokeWidth
+        ? maskStrokeWidth * viewScale
+        : undefined}
       use:interactive={{
         panZoom: $panZoom,
         viewport,

packages/system/src/styles/init.css

@@ -12,6 +12,8 @@
 
   --xy-minimap-background-color-default: #fff;
   --xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);
+  --xy-minimap-mask-stroke-color-default: transparent;
+  --xy-minimap-mask-stroke-width-default: 1;
   --xy-minimap-node-background-color-default: #e2e2e2;
   --xy-minimap-node-stroke-color-default: transparent;
   --xy-minimap-node-stroke-width-default: 2;
@@ -34,6 +36,8 @@
 
   --xy-minimap-background-color-default: #141414;
   --xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);
+  --xy-minimap-mask-stroke-color-default: transparent;
+  --xy-minimap-mask-stroke-width-default: 1;
   --xy-minimap-node-background-color-default: #2b2b2b;
   --xy-minimap-node-stroke-color-default: transparent;
   --xy-minimap-node-stroke-width-default: 2;
@@ -310,13 +314,28 @@ svg.xy-flow__connectionline {
 }
 
 .xy-flow__minimap {
-  background: var(--xy-minimap-background-color, var(--xy-minimap-background-color-default));
+  background: var(
+    --xy-minimap-background-color-props,
+    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
+  );
+
+  &-svg {
+    display: block;
+  }
 
   &-mask {
     fill: var(
       --xy-minimap-mask-background-color-props,
       var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
     );
+    stroke: var(
+      --xy-minimap-mask-stroke-color-props,
+      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
+    );
+    stroke-width: var(
+      --xy-minimap-mask-stroke-width-props,
+      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
+    );
   }
 
   &-node {