refactor: Change zoom pane into viewport

* 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
+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) =>