File size: 4,846 Bytes
bc20498 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
<script context="module">"use strict";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const getAttrFunction = (func) => func instanceof Function ? func : () => func;
</script>
<script>import cc from 'classcat';
import { getBoundsOfRects, getInternalNodesBounds, getNodeDimensions, nodeHasDimensions } from '@xyflow/system';
import { useStore } from '../../store';
import { Panel } from '../../container/Panel';
import MinimapNode from './MinimapNode.svelte';
import interactive from './interactive';
export let position = 'bottom-right';
export let ariaLabel = 'Mini map';
export let nodeStrokeColor = 'transparent';
export let nodeColor = undefined;
export let nodeClass = '';
export let nodeBorderRadius = 5;
export let nodeStrokeWidth = 2;
export let bgColor = undefined;
export let maskColor = undefined;
export let maskStrokeColor = undefined;
export let maskStrokeWidth = undefined;
export let width = undefined;
export let height = undefined;
export let pannable = true;
export let zoomable = true;
export let inversePan = undefined;
export let zoomStep = undefined;
export let style = '';
let className = '';
export { className as class };
const defaultWidth = 200;
const defaultHeight = 150;
const { nodes, nodeLookup, viewport, width: containerWidth, height: containerHeight, flowId, panZoom, translateExtent } = useStore();
const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor);
const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
const nodeClassFunc = getAttrFunction(nodeClass);
const shapeRendering =
// @ts-expect-error - TS doesn't know about chrome
typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
const labelledBy = `svelte-flow__minimap-desc-${$flowId}`;
$: viewBB = {
x: -$viewport.x / $viewport.zoom,
y: -$viewport.y / $viewport.zoom,
width: $containerWidth / $viewport.zoom,
height: $containerHeight / $viewport.zoom
};
let boundingRect = viewBB;
$: {
boundingRect =
$nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds($nodeLookup), viewBB) : viewBB;
$nodes;
}
$: 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;
const getViewScale = () => viewScale;
</script>
<Panel
{position}
style={style + (bgColor ? `;--xy-minimap-background-color-props:${bgColor}` : '')}
class={cc(['svelte-flow__minimap', className])}
data-testid="svelte-flow__minimap"
>
{#if $panZoom}
<svg
width={elementWidth}
height={elementHeight}
viewBox="{x} {y} {viewboxWidth} {viewboxHeight}"
class="svelte-flow__minimap-svg"
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
? maskStrokeWidth * viewScale
: undefined}
use:interactive={{
panZoom: $panZoom,
viewport,
getViewScale,
translateExtent: $translateExtent,
width: $containerWidth,
height: $containerHeight,
inversePan,
zoomStep,
pannable,
zoomable
}}
>
{#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if}
{#each $nodes as userNode (userNode.id)}
{@const node = $nodeLookup.get(userNode.id)}
{#if node && nodeHasDimensions(node)}
{@const nodeDimesions = getNodeDimensions(node)}
<MinimapNode
x={node.internals.positionAbsolute.x}
y={node.internals.positionAbsolute.y}
{...nodeDimesions}
selected={node.selected}
color={nodeColorFunc?.(node)}
borderRadius={nodeBorderRadius}
strokeColor={nodeStrokeColorFunc(node)}
strokeWidth={nodeStrokeWidth}
{shapeRendering}
class={nodeClassFunc(node)}
/>
{/if}
{/each}
<path
class="svelte-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-rule="evenodd"
pointer-events="none"
/>
</svg>
{/if}
</Panel>
|