From 4c0a5a62c7b51b38237a61b1c64dfd3b7ef5c294 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 6 Feb 2024 13:19:54 +0100 Subject: [PATCH 1/3] fixed minimap styling by props & mask-stroke-width --- .../src/additional-components/MiniMap/MiniMap.tsx | 7 +++++-- .../react/src/additional-components/MiniMap/types.ts | 2 ++ .../svelte/src/lib/plugins/Minimap/Minimap.svelte | 12 ++++++------ packages/system/src/styles/init.css | 9 ++++++++- 4 files changed, 21 insertions(+), 9 deletions(-) diff --git a/packages/react/src/additional-components/MiniMap/MiniMap.tsx b/packages/react/src/additional-components/MiniMap/MiniMap.tsx index cd3f64ae..80410922 100644 --- a/packages/react/src/additional-components/MiniMap/MiniMap.tsx +++ b/packages/react/src/additional-components/MiniMap/MiniMap.tsx @@ -49,6 +49,7 @@ 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', maskStrokeWidth = 1, @@ -130,7 +131,8 @@ 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-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 +145,7 @@ function MiniMapComponent({ width={elementWidth} height={elementHeight} viewBox={`${x} ${y} ${width} ${height}`} + className="react-flow__minimap-svg" role="img" aria-labelledby={labelledBy} ref={svg} @@ -164,7 +167,7 @@ function MiniMapComponent({ M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`} fillRule="evenodd" stroke={maskStrokeColor} - strokeWidth={maskStrokeWidth} + strokeWidth={maskStrokeWidth * viewScale} pointerEvents="none" /> diff --git a/packages/react/src/additional-components/MiniMap/types.ts b/packages/react/src/additional-components/MiniMap/types.ts index 31e67428..4bfd1a51 100644 --- a/packages/react/src/additional-components/MiniMap/types.ts +++ b/packages/react/src/additional-components/MiniMap/types.ts @@ -19,6 +19,8 @@ export type MiniMapProps = Omit; + /** Background color of minimap */ + bgColor?: string; /** Color of mask representing viewport */ maskColor?: string; /** Stroke color of mask representing viewport */ diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte index 7b2896d8..dfe3d086 100644 --- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte +++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte @@ -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'] = undefined; + export let maskStrokeWidth: $$Props['maskStrokeWidth'] = 1; export let width: $$Props['width'] = undefined; export let height: $$Props['height'] = undefined; export let pannable: $$Props['pannable'] = true; @@ -83,7 +83,7 @@ @@ -92,12 +92,10 @@ 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-color-props={maskColor} - style:--xy-minimap-mask-stroke-color-props={maskStrokeColor} - style:--xy-minimap-mask-stroke-width-props={maskStrokeWidth} + style:--xy-minimap-mask-background-color-props={maskColor} use:interactive={{ panZoom: $panZoom, viewport, @@ -137,6 +135,8 @@ 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" /> diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css index 14519c74..77352a74 100644 --- a/packages/system/src/styles/init.css +++ b/packages/system/src/styles/init.css @@ -310,7 +310,14 @@ 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, + var(--xy-minimap-background-color-props, var(--xy-minimap-background-color-default)) + ); + + &-svg { + display: block; + } &-mask { fill: var( From ceb160fa7be405544b6458606064e61a923b9b7a Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 7 Feb 2024 12:19:23 +0100 Subject: [PATCH 2/3] added css variables for minimap mask, set default mask-stroke to 0 --- .../additional-components/MiniMap/MiniMap.tsx | 9 +++++---- .../src/lib/plugins/Minimap/Minimap.svelte | 8 ++++---- packages/system/src/styles/init.css | 16 ++++++++++++++-- 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/packages/react/src/additional-components/MiniMap/MiniMap.tsx b/packages/react/src/additional-components/MiniMap/MiniMap.tsx index 80410922..f841c8b6 100644 --- a/packages/react/src/additional-components/MiniMap/MiniMap.tsx +++ b/packages/react/src/additional-components/MiniMap/MiniMap.tsx @@ -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" /> diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte index dfe3d086..29ccd8e7 100644 --- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte +++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte @@ -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 @@ @@ -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" /> diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css index 77352a74..57426b1b 100644 --- a/packages/system/src/styles/init.css +++ b/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: 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 { From 1d87926724753e2718d0d04c12d886925a87d7d2 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 7 Feb 2024 13:07:39 +0100 Subject: [PATCH 3/3] changed maskStrokeWidth default back to 1 --- packages/svelte/src/lib/plugins/Minimap/Minimap.svelte | 4 +++- packages/system/src/styles/init.css | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte index 29ccd8e7..031235b6 100644 --- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte +++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte @@ -97,7 +97,9 @@ 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} + style:--xy-minimap-mask-stroke-width-props={maskStrokeWidth + ? maskStrokeWidth * viewScale + : undefined} use:interactive={{ panZoom: $panZoom, viewport, diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css index 57426b1b..270a6ab2 100644 --- a/packages/system/src/styles/init.css +++ b/packages/system/src/styles/init.css @@ -13,7 +13,7 @@ --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-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; @@ -37,7 +37,7 @@ --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-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;