alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added css variables for minimap mask, set default mask-stroke to 0

Browse Source
This commit is contained in:
peterkogo
2024-02-07 12:19:23 +01:00
parent 4c0a5a62c7
commit ceb160fa7b
3 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/react/src/additional-components/MiniMap/MiniMap.tsx
View File

@@ -51,8 +51,8 @@ function MiniMapComponent({
nodeComponent,
bgColor,
maskColor,
maskStrokeColor = 'none',
maskStrokeWidth = 1,
maskStrokeColor,
maskStrokeWidth,
position = 'bottom-right',
onClick,
onNodeClick,
@@ -133,6 +133,9 @@ function MiniMapComponent({
...style,
'--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,
@@ -166,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 * viewScale}
pointerEvents="none"
/>
</svg>

8
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
View File

@@ -27,7 +27,7 @@
export let bgColor: $$Props['bgColor'] = undefined;
export let maskColor: $$Props['maskColor'] = undefined;
export let maskStrokeColor: $$Props['maskStrokeColor'] = undefined;
export let maskStrokeWidth: $$Props['maskStrokeWidth'] = 1;
export let maskStrokeWidth: $$Props['maskStrokeWidth'] = undefined;
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let pannable: $$Props['pannable'] = true;
@@ -83,7 +83,7 @@
<Panel
{position}
style={style + `;--xy-minimap-background-color-props:${bgColor}`}
style={style + (bgColor ? `;--xy-minimap-background-color-props:${bgColor}` : '')}
class={cc(['svelte-flow__minimap', className])}
data-testid="svelte-flow__minimap"
>
@@ -96,6 +96,8 @@
role="img"
aria-labelledby={labelledBy}
style:--xy-minimap-mask-background-color-props={maskColor}
style:--xy-minimap-mask-stroke-color-props={maskStrokeColor}
style:--xy-minimap-mask-stroke-width-props={(maskStrokeWidth ?? 0) * viewScale}
use:interactive={{
panZoom: $panZoom,
viewport,
@@ -135,8 +137,6 @@
offset * 2}h{-viewboxWidth - offset * 2}z
M{viewBB.x},{viewBB.y}h{viewBB.width}v{viewBB.height}h{-viewBB.width}z"
fill-rule="evenodd"
stroke={maskStrokeColor}
stroke-width={maskStrokeWidth ?? 1 * viewScale}
pointer-events="none"
/>
</svg>

16
packages/system/src/styles/init.css
View File

@@ -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: 0;
--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: 0;
--xy-minimap-node-background-color-default: #2b2b2b;
--xy-minimap-node-stroke-color-default: transparent;
--xy-minimap-node-stroke-width-default: 2;
@@ -311,8 +315,8 @@ svg.xy-flow__connectionline {
.xy-flow__minimap {
background: var(
--xy-minimap-background-color,
var(--xy-minimap-background-color-props, var(--xy-minimap-background-color-default))
--xy-minimap-background-color-props,
var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
);
&-svg {
@@ -324,6 +328,14 @@ svg.xy-flow__connectionline {
--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 {