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

refactor: Change zoom pane into viewport

Browse Source 
* split zoom pane into smaller components as viewport
* rename UseZoomPanHelper Type to Viewport
This commit is contained in:
Braks
2022-04-11 11:30:10 +02:00
parent 3838ffc2fb
commit 3d67d29347
10 changed files with 230 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package/src/composables/useZoomPanHelper.ts
+2 -2
View File
@@ -2,13 +2,13 @@ import { zoomIdentity } from 'd3-zoom'
import useVueFlow from './useVueFlow'
import useWindow from './useWindow'
import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils'
import { GraphNode, Store, UseZoomPanHelper, D3Selection } from '~/types'
import { GraphNode, Store, Viewport, D3Selection } from '~/types'
const DEFAULT_PADDING = 0.1
const transition = (selection: D3Selection, ms = 0) => selection.transition().duration(ms)
export default (store: Store = useVueFlow().store): UseZoomPanHelper => ({
export default (store: Store = useVueFlow().store): Viewport => ({
zoomIn: (options) => store.d3Selection && store.d3Zoom?.scaleBy(transition(store.d3Selection, options?.duration), 1.2),
zoomOut: (options) => store.d3Selection && store.d3Zoom?.scaleBy(transition(store.d3Selection, options?.duration), 1 / 1.2),
zoomTo: (zoomLevel, options) =>
package/src/container/TransformationPane/TransformationPane.vue → package/src/container/Viewport/Transform.vue
+1 -1
View File
@@ -33,7 +33,7 @@ const transform = computed(() => `translate(${store.transform[0]}px,${store.tran
</script>
<script lang="ts">
export default {
name: 'TransformationPane',
name: 'Transform',
}
</script>
<template>
package/src/container/Viewport/Viewport.vue
+53
View File
@@ -0,0 +1,53 @@
<script lang="ts" setup>
import { zoom } from 'd3-zoom'
import { select } from 'd3-selection'
import { useVueFlow } from '../../composables'
import SelectionPane from '../SelectionPane/SelectionPane.vue'
import Zoom from './Zoom.vue'
import Transform from './Transform.vue'
const { id, store } = useVueFlow()
const zoomPaneEl = templateRef<HTMLDivElement>('viewport', null)
const { width, height } = useElementBounding(zoomPaneEl)
useResizeObserver(zoomPaneEl, () => {
store.dimensions.width = width.value
store.dimensions.height = height.value
})
const d3Zoom = ref()
const d3Selection = ref()
const d3ZoomHandler = ref()
onMounted(() => {
d3Zoom.value = zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent)
d3Selection.value = select(zoomPaneEl.value).call(d3Zoom.value)
d3ZoomHandler.value = d3Selection.value.on('wheel.zoom')
store.setState({
d3Zoom: d3Zoom.value,
d3Selection: d3Selection.value,
d3ZoomHandler: d3ZoomHandler.value,
})
})
</script>
<script lang="ts">
export default {
name: 'Viewport',
}
</script>
<template>
<div ref="viewport" class="vue-flow__viewport vue-flow__container">
<Zoom
v-if="d3Zoom && d3Selection && d3ZoomHandler"
:d3-zoom="d3Zoom"
:d3-selection="d3Selection"
:d3-zoom-handler="d3ZoomHandler"
>
<Transform>
<slot />
</Transform>
</Zoom>
<SelectionPane :key="`selection-pane-${id}`" />
</div>
</template>
package/src/container/Viewport/Zoom.vue
+152
View File
@@ -0,0 +1,152 @@
<script lang="ts" setup>
import { D3ZoomEvent, zoomIdentity, ZoomTransform } from 'd3-zoom'
import { pointer } from 'd3-selection'
import { useKeyPress, useVueFlow } from '../../composables'
import { D3Selection, D3Zoom, D3ZoomHandler, FlowTransform, PanOnScrollMode } from '../../types'
import { clamp, clampPosition } from '../../utils'
interface Props {
d3Zoom: D3Zoom
d3Selection: D3Selection
d3ZoomHandler: D3ZoomHandler
}
const props = defineProps<Props>()
const { store } = useVueFlow()
const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
(prevTransform.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
(prevTransform.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
(prevTransform.zoom !== eventTransform.k && !isNaN(eventTransform.k))
const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => ({
x: eventTransform.x,
y: eventTransform.y,
zoom: eventTransform.k,
})
const isWrappedWithClass = (event: Event, className: string | undefined) => (event.target as Element).closest(`.${className}`)
const clampedZoom = clamp(store.defaultZoom, store.minZoom, store.maxZoom)
const transform = ref({
...clampPosition({ x: store.defaultPosition[0], y: store.defaultPosition[1] }, store.translateExtent),
zoom: clampedZoom,
})
const updatedTransform = zoomIdentity.translate(transform.value.x, transform.value.y).scale(transform.value.zoom)
props.d3Zoom.transform(props.d3Selection, updatedTransform)
store.transform = [updatedTransform.x, updatedTransform.y, updatedTransform.k]
const selectionKeyPressed = useKeyPress(store.selectionKeyCode, (keyPress) => {
if (keyPress) {
props.d3Zoom.on('zoom', null)
} else {
props.d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
store.setState({ transform: [event.transform.x, event.transform.y, event.transform.k] })
const flowTransform = eventToFlowTransform(event.transform)
store.hooks.move.trigger({ event, flowTransform })
})
}
})
const zoomKeyPressed = useKeyPress(store.zoomActivationKeyCode)
props.d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
const flowTransform = eventToFlowTransform(event.transform)
transform.value = flowTransform
store.hooks.moveStart.trigger({ event, flowTransform })
})
props.d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
if (viewChanged(transform.value, event.transform)) {
const flowTransform = eventToFlowTransform(event.transform)
transform.value = flowTransform
store.hooks.moveEnd.trigger({ event, flowTransform })
}
})
props.d3Selection
?.on('wheel', (event: WheelEvent) => {
if (store.panOnScroll && !zoomKeyPressed.value) {
if (isWrappedWithClass(event, store.noWheelClassName)) return
event.preventDefault()
event.stopImmediatePropagation()
const currentZoom = props.d3Selection?.property('__zoom').k || 1
if (event.ctrlKey && store.zoomOnPinch) {
const point = pointer(event)
// taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10
const zoom = currentZoom * Math.pow(2, pinchDelta)
if (props.d3Selection) props.d3Zoom.scaleTo(props.d3Selection, zoom, point)
return
}
// increase scroll speed in firefox
// firefox: deltaMode === 1; chrome: deltaMode === 0
const deltaNormalize = event.deltaMode === 1 ? 20 : 1
const deltaX = store.panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
const deltaY = store.panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
if (props.d3Selection && store.panOnScrollSpeed)
props.d3Zoom?.translateBy(
props.d3Selection,
-(deltaX / currentZoom) * store.panOnScrollSpeed,
-(deltaY / currentZoom) * store.panOnScrollSpeed,
)
} else {
if (
(!store.zoomOnScroll && store.preventScrolling) ||
!store.preventScrolling ||
isWrappedWithClass(event, store.noWheelClassName)
)
return null
event.preventDefault()
}
})
.on('wheel.zoom', store.panOnScroll || typeof props.d3ZoomHandler === 'undefined' ? null : (props.d3ZoomHandler as any))
props.d3Zoom.filter((event: MouseEvent) => {
console.log(event)
const zoomScroll = zoomKeyPressed.value || store.zoomOnScroll
const pinchZoom = store.zoomOnPinch && event.ctrlKey
// if all interactions are disabled, we prevent all zoom events
if (!store.panOnDrag && !zoomScroll && !store.panOnScroll && !store.zoomOnDoubleClick && !store.zoomOnPinch) return false
// during a selection we prevent all other interactions
if (selectionKeyPressed.value) return false
// if zoom on double click is disabled, we prevent the double click event
if (!store.zoomOnDoubleClick && event.type === 'dblclick') return false
// if the target element is inside an element with the nowheel class, we prevent zooming
if (isWrappedWithClass(event, store.noWheelClassName) && event.type === 'wheel') return false
// if the target element is inside an element with the nopan class, we prevent panning
if (isWrappedWithClass(event, store.noPanClassName) && event.type !== 'wheel') return false
if (!store.zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
// when there is no scroll handling enabled, we prevent all wheel events
if (!zoomScroll && !store.panOnScroll && !pinchZoom && event.type === 'wheel') return false
// if the pane is not movable, we prevent dragging it with mousestart or touchstart
if (!store.panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) return false
// default filter for d3-zoom
return (!event.ctrlKey || event.type === 'wheel') && !event.button
})
</script>
<script lang="ts">
export default {
name: 'Zoom',
}
</script>
<template>
<slot />
</template>
package/src/container/VueFlow/VueFlow.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import ZoomPane from '../ZoomPane/ZoomPane.vue'
import Viewport from '../Viewport/Viewport.vue'
import { createHooks, useHooks } from '../../store'
import { useVueFlow } from '../../composables'
import type { FlowProps } from '../../types/flow'
@@ -91,7 +91,7 @@ export default {
</script>
<template>
<div class="vue-flow">
<ZoomPane :key="`renderer-${id}`">
<Viewport :key="`renderer-${id}`">
<template #nodes>
<template v-for="nodeName of Object.keys(getNodeTypes)" :key="`node-${nodeName}-${id}`">
<slot :name="`node-${nodeName}`" />
@@ -106,7 +106,7 @@ export default {
<slot name="connection-line" />
</template>
<slot name="zoom-pane" />
</ZoomPane>
</Viewport>
<slot />
</div>
</template>
package/src/container/ZoomPane/ZoomPane.vue
-172
View File
@@ -1,172 +0,0 @@
<script lang="ts" setup>
import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
import { pointer, select } from 'd3-selection'
import { FlowTransform, PanOnScrollMode } from '../../types'
import { useKeyPress, useVueFlow } from '../../composables'
import { clamp, clampPosition } from '../../utils'
import SelectionPane from '../SelectionPane/SelectionPane.vue'
import TransformationPane from '../TransformationPane/TransformationPane.vue'
const { id, store } = useVueFlow()
const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
(prevTransform.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
(prevTransform.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
(prevTransform.zoom !== eventTransform.k && !isNaN(eventTransform.k))
const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => ({
x: eventTransform.x,
y: eventTransform.y,
zoom: eventTransform.k,
})
const isWrappedWithClass = (event: Event, className: string | undefined) => (event.target as Element).closest(`.${className}`)
const clampedZoom = clamp(store.defaultZoom, store.minZoom, store.maxZoom)
const transform = ref({
...clampPosition({ x: store.defaultPosition[0], y: store.defaultPosition[1] }, store.translateExtent),
zoom: clampedZoom,
})
const { width, height } = useElementBounding(zoomPaneEl)
onMounted(() => {
const d3Zoom = zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent)
const d3Selection = select(zoomPaneEl.value).call(d3Zoom)
const d3ZoomHandler = d3Selection.on('wheel.zoom')
const updatedTransform = zoomIdentity.translate(transform.value.x, transform.value.y).scale(transform.value.zoom)
d3Zoom.transform(d3Selection, updatedTransform)
store.setState({
d3Zoom,
d3Selection,
d3ZoomHandler,
transform: [updatedTransform.x, updatedTransform.y, updatedTransform.k],
})
const selectionKeyPressed = useKeyPress(store.selectionKeyCode, (keyPress) => {
if (keyPress) {
d3Zoom.on('zoom', null)
} else {
d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
store.setState({ transform: [event.transform.x, event.transform.y, event.transform.k] })
const flowTransform = eventToFlowTransform(event.transform)
store.hooks.move.trigger({ event, flowTransform })
})
}
})
const zoomKeyPressed = useKeyPress(store.zoomActivationKeyCode)
d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
const flowTransform = eventToFlowTransform(event.transform)
transform.value = flowTransform
store.hooks.moveStart.trigger({ event, flowTransform })
})
d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
if (viewChanged(transform.value, event.transform)) {
const flowTransform = eventToFlowTransform(event.transform)
transform.value = flowTransform
store.hooks.moveEnd.trigger({ event, flowTransform })
}
})
d3Selection
?.on('wheel', (event: WheelEvent) => {
if (store.panOnScroll && !zoomKeyPressed.value) {
if (isWrappedWithClass(event, store.noWheelClassName)) return
event.preventDefault()
event.stopImmediatePropagation()
const currentZoom = d3Selection?.property('__zoom').k || 1
if (event.ctrlKey && store.zoomOnPinch) {
const point = pointer(event)
// taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10
const zoom = currentZoom * Math.pow(2, pinchDelta)
if (d3Selection) d3Zoom.scaleTo(d3Selection, zoom, point)
return
}
// increase scroll speed in firefox
// firefox: deltaMode === 1; chrome: deltaMode === 0
const deltaNormalize = event.deltaMode === 1 ? 20 : 1
const deltaX = store.panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
const deltaY = store.panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
if (d3Selection && store.panOnScrollSpeed)
d3Zoom?.translateBy(
d3Selection,
-(deltaX / currentZoom) * store.panOnScrollSpeed,
-(deltaY / currentZoom) * store.panOnScrollSpeed,
)
} else {
if (
(!store.zoomOnScroll && store.preventScrolling) ||
!store.preventScrolling ||
isWrappedWithClass(event, store.noWheelClassName)
)
return null
event.preventDefault()
}
})
.on('wheel.zoom', store.panOnScroll || typeof d3ZoomHandler === 'undefined' ? null : (d3ZoomHandler as any))
d3Zoom.filter((event: MouseEvent) => {
const zoomScroll = zoomKeyPressed.value || store.zoomOnScroll
const pinchZoom = store.zoomOnPinch && event.ctrlKey
// if all interactions are disabled, we prevent all zoom events
if (!store.panOnDrag && !zoomScroll && !store.panOnScroll && !store.zoomOnDoubleClick && !store.zoomOnPinch) return false
// during a selection we prevent all other interactions
if (selectionKeyPressed.value) return false
// if zoom on double click is disabled, we prevent the double click event
if (!store.zoomOnDoubleClick && event.type === 'dblclick') return false
// if the target element is inside an element with the nowheel class, we prevent zooming
if (isWrappedWithClass(event, store.noWheelClassName) && event.type === 'wheel') return false
// if the target element is inside an element with the nopan class, we prevent panning
if (isWrappedWithClass(event, store.noPanClassName) && event.type !== 'wheel') return false
if (!store.zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
// when there is no scroll handling enabled, we prevent all wheel events
if (!zoomScroll && !store.panOnScroll && !pinchZoom && event.type === 'wheel') return false
// if the pane is not movable, we prevent dragging it with mousestart or touchstart
if (!store.panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) return false
// default filter for d3-zoom
return (!event.ctrlKey || event.type === 'wheel') && !event.button
})
})
watch(
[width, height],
([newWidth, newHeight]) => {
store.dimensions.width = newWidth
store.dimensions.height = newHeight
},
{ immediate: true },
)
</script>
<script lang="ts">
export default {
name: 'ZoomPane',
}
</script>
<template>
<div ref="zoomPane" class="vue-flow__renderer vue-flow__container">
<TransformationPane>
<slot />
</TransformationPane>
<SelectionPane :key="`selection-pane-${id}`" />
</div>
</template>
package/src/style.css
+1 -1
View File
@@ -23,7 +23,7 @@
z-index: 1;
}
.vue-flow__renderer {
.vue-flow__viewport {
z-index: 4;
}
package/src/types/flow.ts
+6 -6
View File
@@ -2,7 +2,7 @@ import { CSSProperties, VNode } from 'vue'
import { GraphEdge, Edge, DefaultEdgeOptions } from './edge'
import { GraphNode, CoordinateExtent, Node } from './node'
import { ConnectionLineType, ConnectionMode } from './connection'
import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom'
import { KeyCode, PanOnScrollMode, Viewport } from './zoom'
import { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
export type ElementData = any
@@ -86,14 +86,14 @@ export type FlowExportObject = {
zoom: number
}
export type ToObject = () => FlowExportObject
export type FlowInstance = {
interface Exports {
getElements: () => FlowElements
getNodes: () => GraphNode[]
getEdges: () => GraphEdge[]
toObject: ToObject
} & UseZoomPanHelper
toObject: () => FlowExportObject
}
export type FlowInstance = Exports & Viewport
export interface FlowProps<NodeData = ElementData, EdgeData = ElementData> {
id?: string
package/src/types/store.ts
+11 -2
View File
@@ -34,15 +34,18 @@ export interface State<NodeData = ElementData, EdgeData = ElementData>
d3Zoom: D3Zoom | null
d3Selection: D3Selection | null
d3ZoomHandler: D3ZoomHandler | null
minZoom: number
maxZoom: number
defaultZoom: number
translateExtent: CoordinateExtent
nodeExtent: CoordinateExtent
/** zoom pane dimensions */
/** viewport dimensions */
dimensions: Dimensions
/** transform x, y, z */
/** viewport transform x, y, z */
transform: Transform
onlyRenderVisibleElements: boolean
defaultPosition: [number, number]
@@ -50,6 +53,7 @@ export interface State<NodeData = ElementData, EdgeData = ElementData>
nodesSelectionActive: boolean
userSelectionActive: boolean
multiSelectionActive: boolean
deleteKeyCode: KeyCode
selectionKeyCode: KeyCode
multiSelectionKeyCode: KeyCode
@@ -63,6 +67,7 @@ export interface State<NodeData = ElementData, EdgeData = ElementData>
connectionLineType: ConnectionLineType
connectionLineStyle: CSSProperties | null
connectionStartHandle: StartHandle | null
connectOnClick: boolean
edgeUpdaterRadius: number
@@ -73,8 +78,10 @@ export interface State<NodeData = ElementData, EdgeData = ElementData>
edgesUpdatable: boolean
nodesDraggable: boolean
nodesConnectable: boolean
elementsSelectable: boolean
selectNodesOnDrag: boolean
panOnDrag: boolean
zoomOnScroll: boolean
zoomOnPinch: boolean
@@ -88,9 +95,11 @@ export interface State<NodeData = ElementData, EdgeData = ElementData>
applyDefault: boolean
fitViewOnInit?: boolean
noDragClassName?: 'nodrag' | string
noWheelClassName?: 'nowheel' | string
noPanClassName?: 'nopan' | string
defaultEdgeOptions?: DefaultEdgeOptions
vueFlowVersion: string
package/src/types/zoom.ts
+1 -1
View File
@@ -52,7 +52,7 @@ export type ZoomTo = (zoomLevel: number, options?: UseZoomPanHelperOptions) => v
export type GetTransform = () => FlowTransform
export type SetTransform = (transform: FlowTransform, options?: UseZoomPanHelperOptions) => void
export interface UseZoomPanHelper {
export interface Viewport {
zoomIn: ZoomInOut
zoomOut: ZoomInOut
zoomTo: ZoomTo