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

refactor(core): use noop viewport helper when viewport is not ready

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-02-22 20:20:11 +01:00
committed by Braks
parent 7cab68ed84
commit dfce24a5fa
4 changed files with 109 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/composables/useViewport.ts
+98 -71
View File
@@ -3,81 +3,26 @@ import type { ComputedGetters, D3Selection, GraphNode, State, ViewportFunctions
const DEFAULT_PADDING = 0.1
export default (state: State, getters: ComputedGetters): ViewportFunctions => {
const noop = () => {}
const initialViewportHelper: ViewportFunctions = {
zoomIn: noop,
zoomOut: noop,
zoomTo: noop,
fitView: noop,
setCenter: noop,
fitBounds: noop,
project: (position) => position,
setTransform: noop,
getTransform: () => ({ x: 0, y: 0, zoom: 1 }),
}
export default (state: State, getters: ComputedGetters) => {
const { nodes, d3Zoom, d3Selection, dimensions, translateExtent, minZoom, maxZoom, viewport, snapToGrid, snapGrid } = $(state)
const { getNodes } = $(getters)
return {
zoomIn: async (options) => {
await zoom(1.2, options?.duration)
},
zoomOut: async (options) => {
await zoom(1 / 1.2, options?.duration)
},
zoomTo: async (zoomLevel, options) => {
if (d3Selection && d3Zoom) {
d3Zoom.scaleTo(transition(d3Selection, options?.duration), zoomLevel)
}
},
setTransform: async (transform, options) => {
transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
},
getTransform: () => ({
x: viewport.x,
y: viewport.y,
zoom: viewport.zoom,
}),
fitView: async (
options = {
padding: DEFAULT_PADDING,
includeHiddenNodes: false,
duration: 0,
},
) => {
if (!nodes.length) return
const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? nodes : getNodes).filter((node) => {
const initialized = node.initialized && node.dimensions.width && node.dimensions.height
let shouldInclude = true
if (options.nodes?.length) {
shouldInclude = options.nodes.includes(node.id)
}
return initialized && shouldInclude
})
const bounds = getRectOfNodes(nodesToFit)
const { x, y, zoom } = getTransformForBounds(
bounds,
dimensions.width,
dimensions.height,
options.minZoom ?? minZoom,
options.maxZoom ?? maxZoom,
options.padding ?? DEFAULT_PADDING,
options.offset,
)
transformViewport(x, y, zoom, options?.duration)
},
setCenter: async (x, y, options) => {
const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom
const centerX = dimensions.width / 2 - x * nextZoom
const centerY = dimensions.height / 2 - y * nextZoom
transformViewport(centerX, centerY, nextZoom, options?.duration)
},
fitBounds: async (bounds, options = { padding: DEFAULT_PADDING }) => {
const { x, y, zoom } = getTransformForBounds(bounds, dimensions.width, dimensions.height, minZoom, maxZoom, options.padding)
transformViewport(x, y, zoom, options?.duration)
},
project: (position) => pointToRendererPoint(position, viewport, snapToGrid, snapGrid),
}
async function zoom(scale: number, duration?: number) {
function zoom(scale: number, duration?: number) {
if (d3Selection && d3Zoom) {
d3Zoom.scaleBy(transition(d3Selection, duration), scale)
}
@@ -93,6 +38,88 @@ export default (state: State, getters: ComputedGetters): ViewportFunctions => {
d3Zoom.transform(transition(d3Selection, duration), nextTransform)
}
}
return computed<ViewportFunctions>(() => {
if (d3Zoom && d3Selection) {
return {
zoomIn: (options) => {
zoom(1.2, options?.duration)
},
zoomOut: (options) => {
zoom(1 / 1.2, options?.duration)
},
zoomTo: (zoomLevel, options) => {
if (d3Selection && d3Zoom) {
d3Zoom.scaleTo(transition(d3Selection, options?.duration), zoomLevel)
}
},
setTransform: (transform, options) => {
transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
},
getTransform: () => ({
x: viewport.x,
y: viewport.y,
zoom: viewport.zoom,
}),
fitView: (
options = {
padding: DEFAULT_PADDING,
includeHiddenNodes: false,
duration: 0,
},
) => {
if (!nodes.length) return
const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? nodes : getNodes).filter((node) => {
const initialized = node.initialized && node.dimensions.width && node.dimensions.height
let shouldInclude = true
if (options.nodes?.length) {
shouldInclude = options.nodes.includes(node.id)
}
return initialized && shouldInclude
})
const bounds = getRectOfNodes(nodesToFit)
const { x, y, zoom } = getTransformForBounds(
bounds,
dimensions.width,
dimensions.height,
options.minZoom ?? minZoom,
options.maxZoom ?? maxZoom,
options.padding ?? DEFAULT_PADDING,
options.offset,
)
transformViewport(x, y, zoom, options?.duration)
},
setCenter: (x, y, options) => {
const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom
const centerX = dimensions.width / 2 - x * nextZoom
const centerY = dimensions.height / 2 - y * nextZoom
transformViewport(centerX, centerY, nextZoom, options?.duration)
},
fitBounds: (bounds, options = { padding: DEFAULT_PADDING }) => {
const { x, y, zoom } = getTransformForBounds(
bounds,
dimensions.width,
dimensions.height,
minZoom,
maxZoom,
options.padding,
)
transformViewport(x, y, zoom, options?.duration)
},
project: (position) => pointToRendererPoint(position, viewport, snapToGrid, snapGrid),
}
}
return initialViewportHelper
})
}
function transition(selection: D3Selection, ms = 0) {