{
// Really not a fan of this API change...
@@ -343,8 +385,8 @@ const InternalCanvas: FC
}> = forwardRef(({
);
});
-export const Canvas: FC }> = forwardRef(({ selections = [], readonly = false, fit = false, nodes = [], edges = [], maxHeight = 2000, maxWidth = 2000, direction = 'DOWN', pannable = true, zoom = 1, defaultPosition = CanvasPosition.CENTER, zoomable = true, minZoom = -0.5, maxZoom = 1, onNodeLink = () => undefined, onNodeLinkCheck = () => undefined, onLayoutChange = () => undefined, onZoomChange = () => undefined, layoutOptions, ...rest }, ref: Ref) => (
-
+export const Canvas: FC }> = forwardRef(({ selections = [], readonly = false, fit = false, nodes = [], edges = [], maxHeight = 2000, maxWidth = 2000, direction = 'DOWN', pannable = true, panType = 'scroll', zoom = 1, defaultPosition = CanvasPosition.CENTER, zoomable = true, minZoom = -0.5, maxZoom = 1, onNodeLink = () => undefined, onNodeLinkCheck = () => undefined, onLayoutChange = () => undefined, onZoomChange = () => undefined, layoutOptions, ...rest }, ref: Ref) => (
+
));
diff --git a/src/utils/CanvasProvider.tsx b/src/utils/CanvasProvider.tsx
index 94c2541d..f65836bf 100644
--- a/src/utils/CanvasProvider.tsx
+++ b/src/utils/CanvasProvider.tsx
@@ -11,6 +11,7 @@ export interface CanvasProviderValue
selections?: string[];
readonly?: boolean;
pannable: boolean;
+ panType: 'scroll' | 'drag';
}
export const CanvasContext = createContext({} as any);
@@ -43,6 +44,7 @@ export const CanvasProvider = ({
direction,
layoutOptions,
pannable,
+ panType,
defaultPosition,
zoomable,
zoom,
@@ -67,6 +69,7 @@ export const CanvasProvider = ({
maxWidth,
direction,
pannable,
+ panType,
defaultPosition,
fit,
layoutOptions,
@@ -86,6 +89,7 @@ export const CanvasProvider = ({
selections,
readonly,
pannable,
+ panType,
...layoutProps,
...zoomProps,
...dragProps
diff --git a/stories/Controls.stories.tsx b/stories/Controls.stories.tsx
index 1e6b299c..975e8a82 100644
--- a/stories/Controls.stories.tsx
+++ b/stories/Controls.stories.tsx
@@ -1,7 +1,6 @@
import React, { useRef, useState } from 'react';
import { Canvas, CanvasRef } from '../src/Canvas';
import { Node, Edge, MarkerArrow, Port, Icon, Arrow, Label, Remove, Add } from '../src/symbols';
-import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
import { CanvasPosition } from '../src/types';
export default {
@@ -266,52 +265,38 @@ export const Zoom = () => {
);
};
-export const ZoomExternal = () => {
- const ref = useRef(null);
-
- return (
-
-
-
-
-
- );
-};
+export const DragPan = () => (
+
+
+);