108 lines
3.7 KiB
Vue
108 lines
3.7 KiB
Vue
<script lang="ts" setup>
|
|
import { HTMLAttributes } from 'vue'
|
|
import MiniMapNode from './MiniMapNode.vue'
|
|
import { getBoundsofRects, getRectOfNodes } from '~/utils'
|
|
import { Node } from '~/types'
|
|
import { useStore } from '~/composables'
|
|
|
|
type StringFunc = (node: Node) => string
|
|
|
|
export interface MiniMapProps extends HTMLAttributes {
|
|
nodeColor?: string | StringFunc
|
|
nodeStrokeColor?: string | StringFunc
|
|
nodeClassName?: string | StringFunc
|
|
nodeBorderRadius?: number
|
|
nodeStrokeWidth?: number
|
|
maskColor?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<MiniMapProps>(), {
|
|
nodeStrokeColor: '#555',
|
|
nodeColor: '#fff',
|
|
nodeClassName: '',
|
|
nodeBorderRadius: 5,
|
|
nodeStrokeWidth: 2,
|
|
maskColor: 'rgb(240, 242, 243, 0.7)',
|
|
})
|
|
const attrs: any = useAttrs()
|
|
|
|
declare const window: any
|
|
|
|
const defaultWidth = 200
|
|
const defaultHeight = 150
|
|
|
|
const store = useStore()
|
|
|
|
const elementWidth = attrs.style?.width ?? defaultWidth
|
|
const elementHeight = attrs.style?.height ?? defaultHeight
|
|
const nodeColorFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as StringFunc
|
|
const nodeStrokeColorFunc =
|
|
props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as StringFunc
|
|
|
|
const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
|
|
|
|
const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
|
|
|
|
const viewBox = computed(() => {
|
|
const bb = getRectOfNodes(store.nodes)
|
|
const viewBB = {
|
|
x: -store.transform[0] / store.transform[2],
|
|
y: -store.transform[1] / store.transform[2],
|
|
width: store.dimensions.width / store.transform[2],
|
|
height: store.dimensions.height / store.transform[2],
|
|
}
|
|
const boundingRect = store.nodes && store.nodes.length ? getBoundsofRects(bb, viewBB) : viewBB
|
|
const scaledWidth = boundingRect.width / elementWidth
|
|
const scaledHeight = boundingRect.height / elementHeight
|
|
const viewScale = Math.max(scaledWidth, scaledHeight)
|
|
const viewWidth = viewScale * elementWidth
|
|
const viewHeight = viewScale * elementHeight
|
|
const offset = 5 * viewScale
|
|
return {
|
|
viewBB,
|
|
offset,
|
|
x: boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset,
|
|
y: boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset,
|
|
width: viewWidth + offset * 2,
|
|
height: viewHeight + offset * 2,
|
|
}
|
|
})
|
|
</script>
|
|
<template>
|
|
<svg
|
|
:width="elementWidth"
|
|
:height="elementHeight"
|
|
:viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"
|
|
class="vue-flow__minimap"
|
|
>
|
|
<slot name="mini-map-nodes" :nodes="store.nodes" :view-box="viewBox">
|
|
<template v-for="(node, i) of store.nodes" :key="`mini-map-node-${i}`">
|
|
<MiniMapNode
|
|
v-if="!node.isHidden"
|
|
:x="node.__rf.position.x"
|
|
:y="node.__rf.position.y"
|
|
:width="node.__rf.width"
|
|
:height="node.__rf.height"
|
|
:style="node.style"
|
|
:class="nodeClassNameFunc(node)"
|
|
:color="nodeColorFunc(node)"
|
|
:border-radius="props.nodeBorderRadius"
|
|
:stroke-color="nodeStrokeColorFunc(node)"
|
|
:stroke-width="props.nodeStrokeWidth"
|
|
:shape-rendering="shapeRendering"
|
|
/>
|
|
</template>
|
|
</slot>
|
|
<path
|
|
class="vue-flow__minimap-mask"
|
|
:d="`
|
|
M${viewBox.x - viewBox.offset},${viewBox.y - viewBox.offset}h${viewBox.width + viewBox.offset * 2}
|
|
v${viewBox.height + viewBox.offset * 2}
|
|
h${-viewBox.width - viewBox.offset * 2}z
|
|
M${viewBox.viewBB.x},${viewBox.viewBB.y}h${viewBox.viewBB.width}v${viewBox.viewBB.height}h${-viewBox.viewBB.width}z`"
|
|
:fill="props.maskColor"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</template>
|