alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(additional-components): add zoomable and pannable to mini map

Browse Source
This commit is contained in:
braks
2022-11-06 10:59:19 +01:00
committed by Braks
parent 2a5afe706e
commit bd7fa3c148
4 changed files with 116 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/additional-components/package.json
View File

@@ -32,7 +32,12 @@
"vue": "^3.2.37",
"@vue-flow/core": "^1.0.0"
},
"dependencies": {},
"dependencies": {
"@types/d3-selection": "^3.0.3",
"@types/d3-zoom": "^3.0.1",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0"
},
"devDependencies": {
"@vue-flow/core": "workspace:*",
"@vitejs/plugin-vue": "^2.3.4",

126
packages/additional-components/src/minimap/MiniMap.vue
View File

@@ -1,6 +1,9 @@
<script lang="ts" setup>
import type { GraphNode } from '@vue-flow/core'
import { getBoundsofRects, getConnectedEdges, getRectOfNodes, useVueFlow } from '@vue-flow/core'
import { zoom, zoomIdentity } from 'd3-zoom'
import type { D3ZoomEvent } from 'd3-zoom'
import { pointer, select } from 'd3-selection'
import type { PanelPosition } from '../panel'
import { Panel } from '../panel'
import type { MiniMapNodeFunc, MiniMapProps, ShapeRendering } from './types'
@@ -9,37 +12,44 @@ import MiniMapNode from './MiniMapNode'
const {
width,
height,
nodeStrokeColor = '#555',
nodeColor = '#fff',
nodeStrokeColor = 'transparent',
nodeColor = '#e2e2e2',
nodeClassName,
nodeBorderRadius = 5,
nodeStrokeWidth = 2,
maskColor = 'rgb(240, 242, 243, 0.7)',
maskColor = 'rgb(240, 240, 240, 0.6)',
position = 'bottom-right' as PanelPosition,
pannable = false,
zoomable = false,
} = defineProps<MiniMapProps>()
const emit = defineEmits(['nodeClick', 'nodeDblclick', 'nodeMouseenter', 'nodeMousemove', 'nodeMouseleave'])
const emit = defineEmits(['click', 'nodeClick', 'nodeDblclick', 'nodeMouseenter', 'nodeMousemove', 'nodeMouseleave'])
const attrs: Record<string, any> = useAttrs()
const defaultWidth = 200
const defaultHeight = 150
const { id, edges, viewport, dimensions, emits, getNodes } = useVueFlow()
const { id, edges, viewport, dimensions, emits, getNodes, d3Selection, d3Zoom } = useVueFlow()
const el = ref<SVGElement>()
const elementWidth = computed(() => width ?? attrs.style?.width ?? defaultWidth)
const elementHeight = computed(() => height ?? attrs.style?.height ?? defaultHeight)
const nodeColorFunc: MiniMapNodeFunc = nodeColor instanceof Function ? nodeColor : () => nodeColor as string
const nodeStrokeColorFunc: MiniMapNodeFunc =
nodeStrokeColor instanceof Function ? nodeStrokeColor : () => nodeStrokeColor as string
const nodeClassNameFunc = nodeClassName instanceof Function ? nodeClassName : ((() => nodeClassName) as MiniMapNodeFunc)
const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
const nodeColorFunc = computed<MiniMapNodeFunc>(() => (nodeColor instanceof Function ? nodeColor : () => nodeColor as string))
const nodeStrokeColorFunc = computed<MiniMapNodeFunc>(() =>
nodeStrokeColor instanceof Function ? nodeStrokeColor : () => nodeStrokeColor as string,
)
const nodeClassNameFunc = computed<MiniMapNodeFunc>(() =>
nodeClassName instanceof Function ? nodeClassName : ((() => nodeClassName) as MiniMapNodeFunc),
)
const bb = computed(() => getRectOfNodes(getNodes.value))
const viewBB = computed(() => ({
@@ -49,26 +59,33 @@ const viewBB = computed(() => ({
height: dimensions.value.height / viewport.value.zoom,
}))
const boundingRect = computed(() => (getNodes && getNodes.value.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value))
const viewScale = computed(() => {
const scaledWidth = boundingRect.value.width / elementWidth.value
const scaledHeight = boundingRect.value.height / elementHeight.value
return Math.max(scaledWidth, scaledHeight)
})
const viewBox = computed(() => {
const boundingRect = getNodes && getNodes.value.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value
const scaledWidth = boundingRect.width / elementWidth.value
const scaledHeight = boundingRect.height / elementHeight.value
const viewScale = Math.max(scaledWidth, scaledHeight)
const viewWidth = viewScale * elementWidth.value
const viewHeight = viewScale * elementHeight.value
const offset = 5 * viewScale
const viewWidth = viewScale.value * elementWidth.value
const viewHeight = viewScale.value * elementHeight.value
const offset = 5 * viewScale.value
return {
offset,
x: boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset,
y: boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset,
x: boundingRect.value.x - (viewWidth - boundingRect.value.width) / 2 - offset,
y: boundingRect.value.y - (viewHeight - boundingRect.value.height) / 2 - offset,
width: viewWidth + offset * 2,
height: viewHeight + offset * 2,
}
})
const d = computed(() => {
if (viewBox.value.x && viewBox.value.y) {
return `
if (!viewBox.value.x || !viewBox.value.y) return ''
return `
M${viewBox.value.x - viewBox.value.offset},${viewBox.value.y - viewBox.value.offset}
h${viewBox.value.width + viewBox.value.offset * 2}
v${viewBox.value.height + viewBox.value.offset * 2}
@@ -77,11 +94,59 @@ const d = computed(() => {
h${viewBB.value.width}
v${viewBB.value.height}
h${-viewBB.value.width}z`
} else {
return ''
}
})
watchEffect(
(onCleanup) => {
if (el.value) {
const selection = select(el.value as Element)
const zoomHandler = (event: D3ZoomEvent<SVGSVGElement, any>) => {
if (event.sourceEvent.type !== 'wheel' || !d3Selection.value || !d3Zoom.value) {
return
}
const pinchDelta =
-event.sourceEvent.deltaY * (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) * 10
const zoom = viewport.value.zoom * 2 ** pinchDelta
d3Zoom.value.scaleTo(d3Selection.value, zoom)
}
const panHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
if (event.sourceEvent.type !== 'mousemove' || !d3Selection.value || !d3Zoom.value) {
return
}
const position = {
x: viewport.value.x - event.sourceEvent.movementX * viewScale.value * Math.max(1, viewport.value.zoom),
y: viewport.value.y - event.sourceEvent.movementY * viewScale.value * Math.max(1, viewport.value.zoom),
}
const nextTransform = zoomIdentity.translate(position.x, position.y).scale(viewport.value.zoom)
d3Zoom.value.transform(d3Selection.value, nextTransform)
}
const zoomAndPanHandler = zoom()
.on('zoom', pannable ? panHandler : () => {})
.on('zoom.wheel', zoomable ? zoomHandler : () => {})
selection.call(zoomAndPanHandler)
onCleanup(() => {
selection.on('zoom', null)
})
}
},
{ flush: 'post' },
)
const onSvgClick = (event: MouseEvent) => {
const [x, y] = pointer(event)
emit('click', { event, position: { x, y } })
}
const onNodeClick = (event: MouseEvent, node: GraphNode) => {
const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
emits.miniMapNodeClick(param)
@@ -120,15 +185,17 @@ export default {
</script>
<template>
<Panel :position="position" class="vue-flow__minimap">
<Panel :position="position" class="vue-flow__minimap" :class="{ pannable, zoomable }">
<svg
ref="el"
:width="elementWidth"
:height="elementHeight"
:viewBox="[viewBox.x, viewBox.y, viewBox.width, viewBox.height].join(' ')"
role="img"
:aria-labelledby="`vue-flow__minimap-${id}`"
@click="onSvgClick"
>
<title :id="`vue-flow__minimap-${id}`">Vue Flow mini map</title>
<title :id="`vue-flow__minimap-${id}`">Vue Flow mini map {{ id }}</title>
<MiniMapNode
v-for="node of getNodes"
:id="node.id"
@@ -164,7 +231,8 @@ export default {
:shape-rendering="shapeRendering"
/>
</MiniMapNode>
<path class="vue-flow__minimap-mask" :d="d" :fill="maskColor" fill-rule="evenodd" />
<path class="vue-flow__minimap-mask" :style="pannable ? 'cursor: grab' : ''" :d="d" :fill="maskColor" fill-rule="evenodd" />
</svg>
</Panel>
</template>

5
packages/additional-components/src/minimap/types.ts
View File

@@ -25,8 +25,13 @@ export interface MiniMapProps {
maskColor?: string
/** Position of the minimap {@link PanelPosition} */
position?: PanelPosition
/** Enable drag minimap to drag viewport */
pannable?: boolean
/** Enable zoom minimap to zoom viewport */
zoomable?: boolean
width?: number
height?: number
}

12
pnpm-lock.yaml generated
View File

@@ -163,8 +163,12 @@ importers:
packages/additional-components:
specifiers:
'@types/d3-selection': ^3.0.3
'@types/d3-zoom': ^3.0.1
'@vitejs/plugin-vue': ^2.3.4
'@vue-flow/core': workspace:*
d3-selection: ^3.0.0
d3-zoom: ^3.0.0
unplugin-auto-import: ^0.11.2
vite: ^2.9.15
vite-plugin-vue-type-imports: 0.2.0
@@ -172,6 +176,10 @@ importers:
vue: ^3.2.37
vue-tsc: ^0.40.13
dependencies:
'@types/d3-selection': 3.0.3
'@types/d3-zoom': 3.0.1
d3-selection: 3.0.0
d3-zoom: 3.0.0
vue: 3.2.40
devDependencies:
'@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.40
@@ -1851,7 +1859,6 @@ packages:
/@types/d3-color/3.1.0:
resolution: {integrity: sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==}
dev: true
/@types/d3-contour/3.0.1:
resolution: {integrity: sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==}
@@ -1910,7 +1917,6 @@ packages:
resolution: {integrity: sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==}
dependencies:
'@types/d3-color': 3.1.0
dev: true
/@types/d3-path/3.0.0:
resolution: {integrity: sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==}
@@ -1940,7 +1946,6 @@ packages:
/@types/d3-selection/3.0.3:
resolution: {integrity: sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==}
dev: true
/@types/d3-shape/3.1.0:
resolution: {integrity: sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==}
@@ -1971,7 +1976,6 @@ packages:
dependencies:
'@types/d3-interpolate': 3.0.1
'@types/d3-selection': 3.0.3
dev: true
/@types/d3/7.4.0:
resolution: {integrity: sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==}