-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
Minimap.svelte
163 lines (150 loc) · 5.57 KB
/
Minimap.svelte
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<script lang="ts" context="module">
declare const window: Window | undefined;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
func instanceof Function ? func : () => func;
</script>
<script lang="ts">
import cc from 'classcat';
import {
getBoundsOfRects,
getInternalNodesBounds,
getNodeDimensions,
getNodePositionWithOrigin,
nodeHasDimensions,
type Rect
} from '@xyflow/system';
import { useStore } from '$lib/store';
import { Panel } from '$lib/container/Panel';
import MinimapNode from './MinimapNode.svelte';
import interactive from './interactive';
import type { GetMiniMapNodeAttribute, MiniMapProps } from './types';
type $$Props = MiniMapProps;
export let position: $$Props['position'] = 'bottom-right';
export let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
export let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
export let nodeColor: $$Props['nodeColor'] = undefined;
export let nodeClass: $$Props['nodeClass'] = '';
export let nodeBorderRadius: $$Props['nodeBorderRadius'] = 5;
export let nodeStrokeWidth: $$Props['nodeStrokeWidth'] = 2;
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 width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let pannable: $$Props['pannable'] = true;
export let zoomable: $$Props['zoomable'] = true;
export let inversePan: $$Props['inversePan'] = undefined;
export let zoomStep: $$Props['zoomStep'] = undefined;
export let style: $$Props['style'] = '';
let className: $$Props['class'] = '';
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: Rect = 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 pos = getNodePositionWithOrigin(node).positionAbsolute}
{@const nodeDimesions = getNodeDimensions(node)}
<MinimapNode
x={pos.x}
y={pos.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>