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

Merge pull request #4422 from xyflow/next

Browse Source 
React Flow 12.0.0-next.27 & Svelte Flow 0.1.9
This commit is contained in:
Moritz Klack
2024-07-08 17:00:33 +02:00
committed by GitHub
parent 73c2590abf 7017423fe8
commit 98968a7ed4
17 changed files with 284 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
examples/react/src/examples/UseReactFlow/index.tsx
View File

@@ -96,9 +96,13 @@ const UseZoomPanHelperFlow = () => {
);
const onNodeClick = useCallback(
(_: MouseEvent, node: Node) => {
async (_: MouseEvent, node: Node) => {
console.log('set center start');
const { x, y } = node.position;
setCenter(x, y, { zoom: 1, duration: 1200 });
await setCenter(x, y, { zoom: 1, duration: 1200 });
console.log('set center success');
},
[setCenter]
);
@@ -172,7 +176,15 @@ const UseZoomPanHelperFlow = () => {
<Panel position="top-right">
<button onClick={() => zoomIn({ duration: 1200 })}>zoomIn</button>
<button onClick={() => zoomOut({ duration: 0 })}>zoomOut</button>
<button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>fitView</button>
<button
onClick={async () => {
console.log('fit view start');
await fitView({ duration: 1200, padding: 0.3 });
console.log('fit view success');
}}
>
fitView
</button>
<button onClick={onAddNode}>add node</button>
<button onClick={onResetNodes}>reset nodes</button>
<button onClick={logNodes}>useNodes</button>

4
packages/react/CHANGELOG.md
View File

@@ -1,5 +1,9 @@
# @xyflow/react
## 12.0.0-next.27
- return Promises for `setViewport`, `fitView`, `fitBounds` and `zoomTo` to be able to await viewport update
## 12.0.0-next.26
- add `autoPanSpeed` prop

78
packages/react/src/hooks/useViewportHelper.ts
View File

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
import {
pointToRendererPoint,
getViewportForBounds,
getFitViewNodes,
fitView,
type XYPosition,
rendererPointToPoint,
@@ -21,17 +22,33 @@ const useViewportHelper = (): ViewportHelperFunctions => {
return useMemo<ViewportHelperFunctions>(() => {
return {
zoomIn: (options) => store.getState().panZoom?.scaleBy(1.2, { duration: options?.duration }),
zoomOut: (options) => store.getState().panZoom?.scaleBy(1 / 1.2, { duration: options?.duration }),
zoomTo: (zoomLevel, options) => store.getState().panZoom?.scaleTo(zoomLevel, { duration: options?.duration }),
zoomIn: (options) => {
const { panZoom } = store.getState();
return panZoom ? panZoom.scaleBy(1.2, { duration: options?.duration }) : Promise.resolve(false);
},
zoomOut: (options) => {
const { panZoom } = store.getState();
return panZoom ? panZoom.scaleBy(1 / 1.2, { duration: options?.duration }) : Promise.resolve(false);
},
zoomTo: (zoomLevel, options) => {
const { panZoom } = store.getState();
return panZoom ? panZoom.scaleTo(zoomLevel, { duration: options?.duration }) : Promise.resolve(false);
},
getZoom: () => store.getState().transform[2],
setViewport: (viewport, options) => {
setViewport: async (viewport, options) => {
const {
transform: [tX, tY, tZoom],
panZoom,
} = store.getState();
panZoom?.setViewport(
if (!panZoom) {
return Promise.resolve(false);
}
await panZoom.setViewport(
{
x: viewport.x ?? tX,
y: viewport.y ?? tY,
@@ -39,6 +56,8 @@ const useViewportHelper = (): ViewportHelperFunctions => {
},
{ duration: options?.duration }
);
return Promise.resolve(true);
},
getViewport: () => {
const [x, y, zoom] = store.getState().transform;
@@ -46,30 +65,33 @@ const useViewportHelper = (): ViewportHelperFunctions => {
},
fitView: (options) => {
const { nodeLookup, width, height, minZoom, maxZoom, panZoom } = store.getState();
const fitViewNodes = getFitViewNodes(nodeLookup, options);
if (!panZoom) {
return false;
}
return fitView(
{
nodeLookup,
width,
height,
minZoom,
maxZoom,
panZoom,
},
options
);
return panZoom
? fitView(
{
nodes: fitViewNodes,
width,
height,
minZoom,
maxZoom,
panZoom,
},
options
)
: Promise.resolve(false);
},
setCenter: (x, y, options) => {
setCenter: async (x, y, options) => {
const { width, height, maxZoom, panZoom } = store.getState();
const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom;
const centerX = width / 2 - x * nextZoom;
const centerY = height / 2 - y * nextZoom;
panZoom?.setViewport(
if (!panZoom) {
return Promise.resolve(false);
}
await panZoom.setViewport(
{
x: centerX,
y: centerY,
@@ -77,12 +99,20 @@ const useViewportHelper = (): ViewportHelperFunctions => {
},
{ duration: options?.duration }
);
return Promise.resolve(true);
},
fitBounds: (bounds, options) => {
fitBounds: async (bounds, options) => {
const { width, height, minZoom, maxZoom, panZoom } = store.getState();
const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
panZoom?.setViewport(viewport, { duration: options?.duration });
if (!panZoom) {
return Promise.resolve(false);
}
await panZoom.setViewport(viewport, { duration: options?.duration });
return Promise.resolve(true);
},
screenToFlowPosition: (clientPosition: XYPosition, options: { snapToGrid: boolean } = { snapToGrid: true }) => {
const { transform, snapGrid, domNode } = store.getState();

42
packages/react/src/store/index.ts
View File

@@ -1,6 +1,7 @@
import { createWithEqualityFn } from 'zustand/traditional';
import {
clampPosition,
getFitViewNodes,
fitView as fitViewSystem,
adoptUserNodes,
updateAbsolutePositions,
@@ -79,7 +80,6 @@ const createStore = ({
updateNodeInternals: (updates) => {
const {
triggerNodeChanges,
fitView,
nodeLookup,
parentLookup,
fitViewOnInit,
@@ -88,6 +88,7 @@ const createStore = ({
domNode,
nodeOrigin,
debug,
fitViewSync,
} = get();
const { changes, updatedInternals } = updateNodeInternalsSystem(
@@ -106,8 +107,9 @@ const createStore = ({
// we call fitView once initially after all dimensions are set
let nextFitViewDone = fitViewDone;
if (!fitViewDone && fitViewOnInit) {
nextFitViewDone = fitView({
nextFitViewDone = fitViewSync({
...fitViewOnInitOptions,
nodes: fitViewOnInitOptions?.nodes,
});
@@ -287,20 +289,23 @@ const createStore = ({
nodeExtent,
});
},
panBy: (delta): boolean => {
panBy: (delta): Promise<boolean> => {
const { transform, width, height, panZoom, translateExtent } = get();
return panBySystem({ delta, panZoom, transform, translateExtent, width, height });
},
fitView: (options?: FitViewOptions): boolean => {
fitView: (options?: FitViewOptions): Promise<boolean> => {
const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
if (!panZoom) {
return false;
return Promise.resolve(false);
}
const fitViewNodes = getFitViewNodes(nodeLookup, options);
return fitViewSystem(
{
nodeLookup,
nodes: fitViewNodes,
width,
height,
panZoom,
@@ -310,6 +315,31 @@ const createStore = ({
options
);
},
// we can't call an asnychronous function in updateNodeInternals
// for that we created this sync version of fitView
fitViewSync: (options?: FitViewOptions): boolean => {
const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
if (!panZoom) {
return false;
}
const fitViewNodes = getFitViewNodes(nodeLookup, options);
fitViewSystem(
{
nodes: fitViewNodes,
width,
height,
panZoom,
minZoom,
maxZoom,
},
options
);
return fitViewNodes.size > 0;
},
cancelConnection: () => {
set({
connection: { ...initialConnection },

2
packages/react/src/types/general.ts
View File

@@ -65,7 +65,7 @@ export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;
export type FitViewParams<NodeType extends Node = Node> = FitViewParamsBase<NodeType>;
export type FitViewOptions<NodeType extends Node = Node> = FitViewOptionsBase<NodeType>;
export type FitView = (fitViewOptions?: FitViewOptions) => boolean;
export type FitView = (fitViewOptions?: FitViewOptions) => Promise<boolean>;
export type OnInit<NodeType extends Node = Node, EdgeType extends Edge = Edge> = (
reactFlowInstance: ReactFlowInstance<NodeType, EdgeType>
) => void;

3
packages/react/src/types/store.ts
View File

@@ -168,7 +168,8 @@ export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
triggerNodeChanges: (changes: NodeChange<NodeType>[]) => void;
triggerEdgeChanges: (changes: EdgeChange<EdgeType>[]) => void;
panBy: PanBy;
fitView: (options?: FitViewOptions) => boolean;
fitView: (options?: FitViewOptions) => Promise<boolean>;
fitViewSync: (options?: FitViewOptions) => boolean;
};
export type ReactFlowState<NodeType extends Node = Node, EdgeType extends Edge = Edge> = ReactFlowStore<

4
packages/svelte/CHANGELOG.md
View File

@@ -1,5 +1,9 @@
# @xyflow/svelte
## 0.1.9
- return Promises for `setViewport`, `fitView`, `fitBounds` and `zoomTo` to be able to await viewport update
## 0.1.8
- `useConnection` returns `ConnectionState` with `toNode` and `toHandle`

55
packages/svelte/src/lib/hooks/useSvelteFlow.ts
View File

@@ -80,7 +80,7 @@ export function useSvelteFlow(): {
* @param zoomLevel - the zoom level to set
* @param options.duration - optional duration. If set, a transition will be applied
*/
setZoom: (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void;
setZoom: (zoomLevel: number, options?: ViewportHelperFunctionOptions) => Promise<boolean>;
/**
* Returns the current zoom level.
*
@@ -94,14 +94,14 @@ export function useSvelteFlow(): {
* @param y - y position
* @param options.zoom - optional zoom
*/
setCenter: (x: number, y: number, options?: SetCenterOptions) => void;
setCenter: (x: number, y: number, options?: SetCenterOptions) => Promise<boolean>;
/**
* Sets the current viewport.
*
* @param viewport - the viewport to set
* @param options.duration - optional duration. If set, a transition will be applied
*/
setViewport: (viewport: Viewport, options?: ViewportHelperFunctionOptions) => void;
setViewport: (viewport: Viewport, options?: ViewportHelperFunctionOptions) => Promise<boolean>;
/**
* Returns the current viewport.
*
@@ -118,7 +118,7 @@ export function useSvelteFlow(): {
* @param options.duration - optional duration. If set, a transition will be applied
* @param options.nodes - optional nodes to fit the view to
*/
fitView: (options?: FitViewOptions) => void;
fitView: (options?: FitViewOptions) => Promise<boolean>;
/**
* Returns all nodes that intersect with the given node or rect.
*
@@ -153,7 +153,7 @@ export function useSvelteFlow(): {
* @param bounds - the bounds ({ x: number, y: number, width: number, height: number }) to fit the view to
* @param options.padding - optional padding
*/
fitBounds: (bounds: Rect, options?: FitBoundsOptions) => void;
fitBounds: (bounds: Rect, options?: FitBoundsOptions) => Promise<boolean>;
/**
* Deletes nodes and edges.
*
@@ -298,26 +298,41 @@ export function useSvelteFlow(): {
getEdge: (id) => get(edgeLookup).get(id),
getEdges: (ids) => (ids === undefined ? get(edges) : getElements(get(edgeLookup), ids)),
setZoom: (zoomLevel, options) => {
get(panZoom)?.scaleTo(zoomLevel, { duration: options?.duration });
const currentPanZoom = get(panZoom);
return currentPanZoom
? currentPanZoom.scaleTo(zoomLevel, { duration: options?.duration })
: Promise.resolve(false);
},
getZoom: () => get(viewport).zoom,
setViewport: (vieport, options) => {
setViewport: async (nextViewport, options) => {
const currentViewport = get(viewport);
const currentPanZoom = get(panZoom);
get(panZoom)?.setViewport(
if (!currentPanZoom) {
return Promise.resolve(false);
}
await currentPanZoom.setViewport(
{
x: vieport.x ?? currentViewport.x,
y: vieport.y ?? currentViewport.y,
zoom: vieport.zoom ?? currentViewport.zoom
x: nextViewport.x ?? currentViewport.x,
y: nextViewport.y ?? currentViewport.y,
zoom: nextViewport.zoom ?? currentViewport.zoom
},
{ duration: options?.duration }
);
return Promise.resolve(true);
},
getViewport: () => get(viewport),
setCenter: (x, y, options) => {
setCenter: async (x, y, options) => {
const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : get(maxZoom);
const currentPanZoom = get(panZoom);
get(panZoom)?.setViewport(
if (!currentPanZoom) {
return Promise.resolve(false);
}
await currentPanZoom.setViewport(
{
x: get(width) / 2 - x * nextZoom,
y: get(height) / 2 - y * nextZoom,
@@ -325,9 +340,17 @@ export function useSvelteFlow(): {
},
{ duration: options?.duration }
);
return Promise.resolve(true);
},
fitView,
fitBounds: (bounds: Rect, options?: FitBoundsOptions) => {
fitBounds: async (bounds: Rect, options?: FitBoundsOptions) => {
const currentPanZoom = get(panZoom);
if (!currentPanZoom) {
return Promise.resolve(false);
}
const viewport = getViewportForBounds(
bounds,
get(width),
@@ -337,7 +360,9 @@ export function useSvelteFlow(): {
options?.padding ?? 0.1
);
get(panZoom)?.setViewport(viewport, { duration: options?.duration });
await currentPanZoom.setViewport(viewport, { duration: options?.duration });
return Promise.resolve(true);
},
getIntersectingNodes: (
nodeOrRect: Node | { id: Node['id'] } | Rect,

46
packages/svelte/src/lib/store/index.ts
View File

@@ -18,7 +18,8 @@ import {
type CoordinateExtent,
type UpdateConnection,
type ConnectionState,
type NodeOrigin
type NodeOrigin,
getFitViewNodes
} from '@xyflow/system';
import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types';
@@ -106,7 +107,7 @@ export function createStore({
if (!get(store.fitViewOnInitDone) && get(store.fitViewOnInit)) {
const fitViewOptions = get(store.fitViewOptions);
const fitViewOnInitDone = fitView({
const fitViewOnInitDone = fitViewSync({
...fitViewOptions,
nodes: fitViewOptions?.nodes
});
@@ -150,12 +151,14 @@ export function createStore({
const panZoom = get(store.panZoom);
if (!panZoom) {
return false;
return Promise.resolve(false);
}
const fitViewNodes = getFitViewNodes(get(store.nodeLookup), options);
return fitViewSystem(
{
nodeLookup: get(store.nodeLookup),
nodes: fitViewNodes,
width: get(store.width),
height: get(store.height),
minZoom: get(store.minZoom),
@@ -166,20 +169,45 @@ export function createStore({
);
}
function zoomBy(factor: number, options?: ViewportHelperFunctionOptions) {
function fitViewSync(options?: FitViewOptions) {
const panZoom = get(store.panZoom);
if (panZoom) {
panZoom.scaleBy(factor, options);
if (!panZoom) {
return false;
}
const fitViewNodes = getFitViewNodes(get(store.nodeLookup), options);
fitViewSystem(
{
nodes: fitViewNodes,
width: get(store.width),
height: get(store.height),
minZoom: get(store.minZoom),
maxZoom: get(store.maxZoom),
panZoom
},
options
);
return fitViewNodes.size > 0;
}
function zoomBy(factor: number, options?: ViewportHelperFunctionOptions) {
const panZoom = get(store.panZoom);
if (!panZoom) {
return Promise.resolve(false);
}
return panZoom.scaleBy(factor, options);
}
function zoomIn(options?: ViewportHelperFunctionOptions) {
zoomBy(1.2, options);
return zoomBy(1.2, options);
}
function zoomOut(options?: ViewportHelperFunctionOptions) {
zoomBy(1 / 1.2, options);
return zoomBy(1 / 1.2, options);
}
function setMinZoom(minZoom: number) {

8
packages/svelte/src/lib/store/types.ts
View File

@@ -20,19 +20,19 @@ export type SvelteFlowStoreActions = {
setNodeTypes: (nodeTypes: NodeTypes) => void;
setEdgeTypes: (edgeTypes: EdgeTypes) => void;
addEdge: (edge: Edge | Connection) => void;
zoomIn: (options?: ViewportHelperFunctionOptions) => void;
zoomOut: (options?: ViewportHelperFunctionOptions) => void;
zoomIn: (options?: ViewportHelperFunctionOptions) => Promise<boolean>;
zoomOut: (options?: ViewportHelperFunctionOptions) => Promise<boolean>;
setMinZoom: (minZoom: number) => void;
setMaxZoom: (maxZoom: number) => void;
setTranslateExtent: (extent: CoordinateExtent) => void;
fitView: (options?: FitViewOptions) => boolean;
fitView: (options?: FitViewOptions) => Promise<boolean>;
updateNodePositions: UpdateNodePositions;
updateNodeInternals: (updates: Map<string, InternalNodeUpdate>) => void;
unselectNodesAndEdges: (params?: { nodes?: Node[]; edges?: Edge[] }) => void;
addSelectedNodes: (ids: string[]) => void;
addSelectedEdges: (ids: string[]) => void;
handleNodeSelection: (id: string) => void;
panBy: (delta: XYPosition) => boolean;
panBy: (delta: XYPosition) => Promise<boolean>;
updateConnection: UpdateConnection;
cancelConnection: () => void;
reset(): void;

14
packages/system/src/types/general.ts
View File

@@ -18,13 +18,13 @@ export type OnMove = (event: MouseEvent | TouchEvent | null, viewport: Viewport)
export type OnMoveStart = OnMove;
export type OnMoveEnd = OnMove;
export type ZoomInOut = (options?: ViewportHelperFunctionOptions) => void;
export type ZoomTo = (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void;
export type ZoomInOut = (options?: ViewportHelperFunctionOptions) => Promise<boolean>;
export type ZoomTo = (zoomLevel: number, options?: ViewportHelperFunctionOptions) => Promise<boolean>;
export type GetZoom = () => number;
export type GetViewport = () => Viewport;
export type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionOptions) => void;
export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => void;
export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => void;
export type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionOptions) => Promise<boolean>;
export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => Promise<boolean>;
export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => Promise<boolean>;
export type Connection = {
source: string;
@@ -55,7 +55,7 @@ export type OnConnectEnd = (event: MouseEvent | TouchEvent) => void;
export type IsValidConnection = (edge: EdgeBase | Connection) => boolean;
export type FitViewParamsBase<NodeType extends NodeBase> = {
nodeLookup: Map<string, InternalNodeBase<NodeType>>;
nodes: Map<string, InternalNodeBase<NodeType>>;
width: number;
height: number;
panZoom: PanZoomInstance;
@@ -130,7 +130,7 @@ export type SelectionRect = Rect & {
export type OnError = (id: string, message: string) => void;
export type UpdateNodePositions = (dragItems: Map<string, NodeDragItem | InternalNodeBase>, dragging?: boolean) => void;
export type PanBy = (delta: XYPosition) => boolean;
export type PanBy = (delta: XYPosition) => Promise<boolean>;
export const initialConnection: NoConnection = {
inProgress: false,

8
packages/system/src/types/panzoom.ts
View File

@@ -45,15 +45,15 @@ export type PanZoomInstance = {
update: (params: PanZoomUpdateOptions) => void;
destroy: () => void;
getViewport: () => Viewport;
setViewport: (viewport: Viewport, options?: PanZoomTransformOptions) => ZoomTransform | undefined;
setViewport: (viewport: Viewport, options?: PanZoomTransformOptions) => Promise<ZoomTransform | undefined>;
setViewportConstrained: (
viewport: Viewport,
extent: CoordinateExtent,
translateExtent: CoordinateExtent
) => ZoomTransform | undefined;
) => Promise<ZoomTransform | undefined>;
setScaleExtent: (scaleExtent: [number, number]) => void;
setTranslateExtent: (translateExtent: CoordinateExtent) => void;
scaleTo: (scale: number, options?: PanZoomTransformOptions) => void;
scaleBy: (factor: number, options?: PanZoomTransformOptions) => void;
scaleTo: (scale: number, options?: PanZoomTransformOptions) => Promise<boolean>;
scaleBy: (factor: number, options?: PanZoomTransformOptions) => Promise<boolean>;
syncViewport: (viewport: Viewport) => void;
};

49
packages/system/src/utils/graph.ts
View File

@@ -233,39 +233,46 @@ export const getConnectedEdges = <NodeType extends NodeBase = NodeBase, EdgeType
return edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
};
export function fitView<Params extends FitViewParamsBase<NodeBase>, Options extends FitViewOptionsBase<NodeBase>>(
{ nodeLookup, width, height, panZoom, minZoom, maxZoom }: Params,
options?: Options
) {
const filteredNodes: Map<string, InternalNodeBase> = new Map();
export function getFitViewNodes<
Params extends NodeLookup<InternalNodeBase<NodeBase>>,
Options extends FitViewOptionsBase<NodeBase>
>(nodeLookup: Params, options?: Pick<Options, 'nodes' | 'includeHiddenNodes'>) {
const fitViewNodes: NodeLookup = new Map();
const optionNodeIds = options?.nodes ? new Set(options.nodes.map((node) => node.id)) : null;
nodeLookup.forEach((n) => {
const isVisible = n.measured.width && n.measured.height && (options?.includeHiddenNodes || !n.hidden);
if (isVisible && (!optionNodeIds || optionNodeIds.has(n.id))) {
filteredNodes.set(n.id, n);
fitViewNodes.set(n.id, n);
}
});
if (filteredNodes.size > 0) {
const bounds = getInternalNodesBounds(filteredNodes);
return fitViewNodes;
}
const viewport = getViewportForBounds(
bounds,
width,
height,
options?.minZoom ?? minZoom,
options?.maxZoom ?? maxZoom,
options?.padding ?? 0.1
);
panZoom.setViewport(viewport, { duration: options?.duration });
return true;
export async function fitView<Params extends FitViewParamsBase<NodeBase>, Options extends FitViewOptionsBase<NodeBase>>(
{ nodes, width, height, panZoom, minZoom, maxZoom }: Params,
options?: Omit<Options, 'nodes' | 'includeHiddenNodes'>
): Promise<boolean> {
if (nodes.size === 0) {
return Promise.resolve(false);
}
return false;
const bounds = getInternalNodesBounds(nodes);
const viewport = getViewportForBounds(
bounds,
width,
height,
options?.minZoom ?? minZoom,
options?.maxZoom ?? maxZoom,
options?.padding ?? 0.1
);
await panZoom.setViewport(viewport, { duration: options?.duration });
return Promise.resolve(true);
}
/**

10
packages/system/src/utils/store.ts
View File

@@ -325,7 +325,7 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
return { changes, updatedInternals };
}
export function panBy({
export async function panBy({
delta,
panZoom,
transform,
@@ -339,12 +339,12 @@ export function panBy({
translateExtent: CoordinateExtent;
width: number;
height: number;
}) {
}): Promise<boolean> {
if (!panZoom || (!delta.x && !delta.y)) {
return false;
return Promise.resolve(false);
}
const nextViewport = panZoom.setViewportConstrained(
const nextViewport = await panZoom.setViewportConstrained(
{
x: transform[0] + delta.x,
y: transform[1] + delta.y,
@@ -361,7 +361,7 @@ export function panBy({
!!nextViewport &&
(nextViewport.x !== transform[0] || nextViewport.y !== transform[1] || nextViewport.k !== transform[2]);
return transformChanged;
return Promise.resolve(transformChanged);
}
export function updateConnectionLookup(connectionLookup: ConnectionLookup, edgeLookup: EdgeLookup, edges: EdgeBase[]) {

5
packages/system/src/xydrag/XYDrag.ts
View File

@@ -195,7 +195,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
}
}
function autoPan() {
async function autoPan() {
if (!containerBounds) {
return;
}
@@ -208,10 +208,11 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
lastPos.x = (lastPos.x ?? 0) - xMovement / transform[2];
lastPos.y = (lastPos.y ?? 0) - yMovement / transform[2];
if (panBy({ x: xMovement, y: yMovement })) {
if (await panBy({ x: xMovement, y: yMovement })) {
updateNodes(lastPos as XYPosition, null);
}
}
autoPanId = requestAnimationFrame(autoPan);
}

41
packages/system/src/xypanzoom/XYPanZoom.ts
View File

@@ -74,8 +74,15 @@ export function XYPanZoom({
function setTransform(transform: ZoomTransform, options?: PanZoomTransformOptions) {
if (d3Selection) {
d3ZoomInstance?.transform(getD3Transition(d3Selection, options?.duration), transform);
return new Promise<boolean>((resolve) => {
d3ZoomInstance?.transform(
getD3Transition(d3Selection, options?.duration, () => resolve(true)),
transform
);
});
}
return Promise.resolve(false);
}
// public functions
@@ -181,27 +188,27 @@ export function XYPanZoom({
d3ZoomInstance.on('zoom', null);
}
function setViewportConstrained(
async function setViewportConstrained(
viewport: Viewport,
extent: CoordinateExtent,
translateExtent: CoordinateExtent
): ZoomTransform | undefined {
): Promise<ZoomTransform | undefined> {
const nextTransform = viewportToTransform(viewport);
const contrainedTransform = d3ZoomInstance?.constrain()(nextTransform, extent, translateExtent);
if (contrainedTransform) {
setTransform(contrainedTransform);
await setTransform(contrainedTransform);
}
return contrainedTransform;
return new Promise((resolve) => resolve(contrainedTransform));
}
function setViewport(viewport: Viewport, options?: PanZoomTransformOptions) {
async function setViewport(viewport: Viewport, options?: PanZoomTransformOptions) {
const nextTransform = viewportToTransform(viewport);
setTransform(nextTransform, options);
await setTransform(nextTransform, options);
return nextTransform;
return new Promise<ZoomTransform>((resolve) => resolve(nextTransform));
}
function syncViewport(viewport: Viewport) {
@@ -228,14 +235,28 @@ export function XYPanZoom({
function scaleTo(zoom: number, options?: PanZoomTransformOptions) {
if (d3Selection) {
d3ZoomInstance?.scaleTo(getD3Transition(d3Selection, options?.duration), zoom);
return new Promise<boolean>((resolve) => {
d3ZoomInstance?.scaleTo(
getD3Transition(d3Selection, options?.duration, () => resolve(true)),
zoom
);
});
}
return Promise.resolve(false);
}
function scaleBy(factor: number, options?: PanZoomTransformOptions) {
if (d3Selection) {
d3ZoomInstance?.scaleBy(getD3Transition(d3Selection, options?.duration), factor);
return new Promise<boolean>((resolve) => {
d3ZoomInstance?.scaleBy(
getD3Transition(d3Selection, options?.duration, () => resolve(true)),
factor
);
});
}
return Promise.resolve(false);
}
function setScaleExtent(scaleExtent: [number, number]) {

11
packages/system/src/xypanzoom/utils.ts
View File

@@ -21,8 +21,15 @@ export const isWrappedWithClass = (event: any, className: string | undefined) =>
export const isRightClickPan = (panOnDrag: boolean | number[], usedButton: number) =>
usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2);
export const getD3Transition = (selection: D3SelectionInstance, duration = 0) =>
typeof duration === 'number' && duration > 0 ? selection.transition().duration(duration) : selection;
export const getD3Transition = (selection: D3SelectionInstance, duration = 0, onEnd = () => {}) => {
const hasDuration = typeof duration === 'number' && duration > 0;
if (!hasDuration) {
onEnd();
}
return hasDuration ? selection.transition().duration(duration).on('end', onEnd) : selection;
};
export const wheelDelta = (event: any) => {
const factor = event.ctrlKey && isMacOs() ? 10 : 1;