116 lines
4.1 KiB
Svelte
116 lines
4.1 KiB
Svelte
<script lang="ts" context="module">
|
|
declare const window: any;
|
|
|
|
const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
|
|
func instanceof Function ? func : () => func;
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import cc from 'classcat';
|
|
import { getBoundsOfRects, getNodePositionWithOrigin, getRectOfNodes } from '@reactflow/utils';
|
|
|
|
import { useStore } from '$lib/store';
|
|
import { Panel } from '$lib/container/Panel';
|
|
import MinimapNode from './MinimapNode.svelte';
|
|
import type { GetMiniMapNodeAttribute, MiniMapProps } from './types';
|
|
|
|
type $$Props = MiniMapProps;
|
|
|
|
let position: $$Props['position'] = 'bottom-right';
|
|
let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
|
|
let style: $$Props['style'] = '';
|
|
let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
|
|
let nodeColor: $$Props['nodeColor'] = '#e2e2e2';
|
|
let nodeClassName: $$Props['nodeClassName'] = '';
|
|
let nodeBorderRadius: $$Props['nodeBorderRadius'] = 5;
|
|
let nodeStrokeWidth: $$Props['nodeStrokeWidth'] = 2;
|
|
let bgColor: $$Props['bgColor'] = '#fff';
|
|
let maskColor: $$Props['maskColor'] = 'rgb(240, 240, 240, 0.6)';
|
|
let maskStrokeColor: $$Props['maskStrokeColor'] = 'none';
|
|
let maskStrokeWidth: $$Props['maskStrokeWidth'] = 1;
|
|
let width: $$Props['width'] = undefined;
|
|
let height: $$Props['height'] = undefined;
|
|
let className: $$Props['class'] = '';
|
|
export { className as class };
|
|
|
|
const defaultWidth = 200;
|
|
const defaultHeight = 150;
|
|
const { nodes, transform, width: containerWidth, height: containerHeight, nodeOrigin, id } = useStore();
|
|
|
|
|
|
const nodeColorFunc = getAttrFunction(nodeColor);
|
|
const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
|
|
const nodeClassNameFunc = getAttrFunction(nodeClassName);
|
|
const shapeRendering =
|
|
typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
|
|
const labelledBy = `react-flow__minimap-desc-${$id}`;
|
|
|
|
$: viewBB = {
|
|
x: -$transform[0] / $transform[2],
|
|
y: -$transform[1] / $transform[2],
|
|
width: $containerWidth / $transform[2],
|
|
height: $containerHeight / $transform[2]
|
|
};
|
|
$: boundingRect =
|
|
$nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes, $nodeOrigin), viewBB) : viewBB;
|
|
$: elementWidth = width ?? defaultWidth;
|
|
$: elementHeight = height ?? defaultHeight;
|
|
$: scaledWidth = boundingRect.width / elementWidth;
|
|
$: scaledHeight = boundingRect.height / elementHeight;
|
|
$: viewScale = Math.max(scaledWidth, scaledHeight);
|
|
$: viewWidth = viewScale * elementWidth;
|
|
$: viewHeight = viewScale * elementHeight;
|
|
$: offset = 5 * viewScale;
|
|
$: x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
|
|
$: y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
|
|
$: viewboxWidth = viewWidth + offset * 2;
|
|
$: viewboxHeight = viewHeight + offset * 2;
|
|
</script>
|
|
|
|
<Panel
|
|
{position}
|
|
class={cc(['react-flow__minimap', className])}
|
|
style={`background-color: ${bgColor}; ${style}`}
|
|
>
|
|
<svg
|
|
width={elementWidth}
|
|
height={elementHeight}
|
|
viewBox={`${x} ${y} ${viewboxWidth} ${viewboxHeight}`}
|
|
role="img"
|
|
aria-labelledby={labelledBy}
|
|
>
|
|
{#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if}
|
|
|
|
{#each $nodes as node (node.id)}
|
|
{#if node.width && node.height}
|
|
{@const pos = getNodePositionWithOrigin(node, $nodeOrigin).positionAbsolute}
|
|
<MinimapNode
|
|
x={pos.x}
|
|
y={pos.y}
|
|
width={node.width}
|
|
height={node.height}
|
|
color={nodeColorFunc(node)}
|
|
borderRadius={nodeBorderRadius}
|
|
strokeColor={nodeStrokeColorFunc(node)}
|
|
strokeWidth={nodeStrokeWidth}
|
|
{shapeRendering}
|
|
class={nodeClassNameFunc(node)}
|
|
style={{}}
|
|
/>
|
|
{/if}
|
|
{/each}
|
|
<path
|
|
class="react-flow__minimap-mask"
|
|
d={`M${x - offset},${y - offset}h${viewboxWidth + offset * 2}v${viewboxHeight + offset * 2}h${
|
|
-viewboxWidth - offset * 2
|
|
}z
|
|
M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
|
|
fill={maskColor}
|
|
fill-rule="evenodd"
|
|
stroke={maskStrokeColor}
|
|
stroke-width={maskStrokeWidth}
|
|
pointer-events="none"
|
|
/>
|
|
</svg>
|
|
</Panel>
|