alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(defaultViewport): clamp invalid zoom values

Browse Source
This commit is contained in:
moklick
2022-12-12 17:43:33 +01:00
parent 0a2529d26e
commit 9ba39ae49f
4 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/vite-app/cypress/e2e/figma.cy.ts
-1
View File
@@ -5,7 +5,6 @@ describe('Figma Flow UI', () => {
it('renders a flow with three nodes', () => { it('renders a flow with three nodes', () => {
cy.get('.react-flow__renderer'); cy.get('.react-flow__renderer');
cy.get('.react-flow-basic-example'); // check if className prop works
cy.get('.react-flow__node').should('have.length', 4); cy.get('.react-flow__node').should('have.length', 4);
cy.get('.react-flow__edge').should('have.length', 2); cy.get('.react-flow__edge').should('have.length', 2);
cy.get('.react-flow__node').children('.react-flow__handle'); cy.get('.react-flow__node').children('.react-flow__handle');
examples/vite-app/src/examples/Figma/index.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode } from 'reactflow'; import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode, Viewport } from 'reactflow';
const MULTI_SELECT_KEY = ['Meta', 'Shift']; const MULTI_SELECT_KEY = ['Meta', 'Shift'];
packages/core/src/container/ZoomPane/index.tsx
+5 -2
View File
@@ -9,8 +9,9 @@ import useKeyPress from '../../hooks/useKeyPress';
import useResizeHandler from '../../hooks/useResizeHandler'; import useResizeHandler from '../../hooks/useResizeHandler';
import { useStore, useStoreApi } from '../../hooks/useStore'; import { useStore, useStoreApi } from '../../hooks/useStore';
import { containerStyle } from '../../styles'; import { containerStyle } from '../../styles';
import type { FlowRendererProps } from '../FlowRenderer'; import { clamp } from '../../utils';
import { CoordinateExtent, PanOnScrollMode } from '../../types'; import { CoordinateExtent, PanOnScrollMode } from '../../types';
import type { FlowRendererProps } from '../FlowRenderer';
import type { Viewport, ReactFlowState } from '../../types'; import type { Viewport, ReactFlowState } from '../../types';
type ZoomPaneProps = Omit< type ZoomPaneProps = Omit<
@@ -80,7 +81,9 @@ const ZoomPane = ({
const bbox = zoomPane.current.getBoundingClientRect(); const bbox = zoomPane.current.getBoundingClientRect();
const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent); const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent);
const selection = select(zoomPane.current as Element).call(d3ZoomInstance); const selection = select(zoomPane.current as Element).call(d3ZoomInstance);
const updatedTransform = zoomIdentity.translate(defaultViewport.x, defaultViewport.y).scale(defaultViewport.zoom); const updatedTransform = zoomIdentity
.translate(defaultViewport.x, defaultViewport.y)
.scale(clamp(defaultViewport.zoom, minZoom, maxZoom));
const extent: CoordinateExtent = [ const extent: CoordinateExtent = [
[0, 0], [0, 0],
[bbox.width, bbox.height], [bbox.width, bbox.height],
packages/core/src/styles/init.css
-4
View File
@@ -30,10 +30,6 @@
z-index: 4; z-index: 4;
} }
.react-flow__pane {
z-index: 5;
}
.react-flow__selection { .react-flow__selection {
z-index: 6; z-index: 6;
} }