diff --git a/packages/core/src/composables/useZoomPanHelper.ts b/packages/core/src/composables/useZoomPanHelper.ts index 10c11535..b4992789 100644 --- a/packages/core/src/composables/useZoomPanHelper.ts +++ b/packages/core/src/composables/useZoomPanHelper.ts @@ -1,5 +1,5 @@ import { zoomIdentity } from 'd3-zoom' -import type { D3Selection, Dimensions, GraphNode, ViewportFunctions } from '~/types' +import type { D3Selection, GraphNode, ViewportFunctions } from '~/types' const DEFAULT_PADDING = 0.1 @@ -7,24 +7,8 @@ const DEFAULT_PADDING = 0.1 * @deprecated use {@link useVueFlow} instead (all viewport functions are also available in {@link useVueFlow}) */ export default (vueFlowId?: string): ViewportFunctions => { - const { - nodes, - d3Zoom, - d3Selection, - dimensions, - translateExtent, - minZoom, - maxZoom, - viewport, - snapToGrid, - snapGrid, - getNodes, - onPaneReady, - } = $(useVueFlow({ id: vueFlowId })) - - let hasDimensions = $ref(false) - - onPaneReady(() => (hasDimensions = true)) + const { nodes, d3Zoom, d3Selection, dimensions, translateExtent, minZoom, maxZoom, viewport, snapToGrid, snapGrid, getNodes } = + $(useVueFlow({ id: vueFlowId })) return { zoomIn: async (options) => { @@ -34,14 +18,11 @@ export default (vueFlowId?: string): ViewportFunctions => { await zoom(1 / 1.2, options?.duration) }, zoomTo: async (zoomLevel, options) => { - if (!hasDimensions) await untilDimensions(dimensions, getNodes) - if (d3Selection && d3Zoom) { d3Zoom.scaleTo(transition(d3Selection, options?.duration), zoomLevel) } }, setTransform: async (transform, options) => { - if (!hasDimensions) await untilDimensions(dimensions, getNodes) transformViewport(transform.x, transform.y, transform.zoom, options?.duration) }, getTransform: () => ({ @@ -56,8 +37,6 @@ export default (vueFlowId?: string): ViewportFunctions => { duration: 0, }, ) => { - if (!hasDimensions) await untilDimensions(dimensions, getNodes) - if (!nodes.length) return const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? nodes : getNodes).filter((node) => { @@ -86,8 +65,6 @@ export default (vueFlowId?: string): ViewportFunctions => { transformViewport(x, y, zoom, options?.duration) }, setCenter: async (x, y, options) => { - if (!hasDimensions) await untilDimensions(dimensions, getNodes) - const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom const centerX = dimensions.width / 2 - x * nextZoom const centerY = dimensions.height / 2 - y * nextZoom @@ -95,8 +72,6 @@ export default (vueFlowId?: string): ViewportFunctions => { transformViewport(centerX, centerY, nextZoom, options?.duration) }, fitBounds: async (bounds, options = { padding: DEFAULT_PADDING }) => { - if (!hasDimensions) await untilDimensions(dimensions, getNodes) - const { x, y, zoom } = getTransformForBounds(bounds, dimensions.width, dimensions.height, minZoom, maxZoom, options.padding) transformViewport(x, y, zoom, options?.duration) @@ -105,8 +80,6 @@ export default (vueFlowId?: string): ViewportFunctions => { } async function zoom(scale: number, duration?: number) { - if (!hasDimensions) await untilDimensions(dimensions, getNodes) - if (d3Selection && d3Zoom) { d3Zoom.scaleBy(transition(d3Selection, duration), scale) } @@ -127,16 +100,3 @@ export default (vueFlowId?: string): ViewportFunctions => { function transition(selection: D3Selection, ms = 0) { return selection.transition().duration(ms) } - -async function untilDimensions(dimensions: Dimensions, nodes: GraphNode[]) { - // if ssr we can't wait for dimensions, they'll never really exist - const window = useWindow() - if ('screen' in window) { - // if initial nodes are present, wait until the node dimensions have been established - if (nodes.length > 0) { - await until(nodes).toMatch((nodes) => nodes.filter((node) => node.initialized).length === nodes.length, { flush: 'pre' }) - } - } - - return true -} diff --git a/packages/core/src/container/Viewport/Transform.vue b/packages/core/src/container/Viewport/Transform.vue index fe35fc79..00a0328d 100644 --- a/packages/core/src/container/Viewport/Transform.vue +++ b/packages/core/src/container/Viewport/Transform.vue @@ -1,42 +1,28 @@