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

Merge branch 'main' into a11y

Browse Source
This commit is contained in:
Moritz Klack
2025-06-03 12:54:44 +02:00
committed by GitHub
parent 679f8a9463 f876e87e78
commit 220cb7f8a3
28 changed files with 160 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/hooks/useViewportHelper.ts
+7 -3
View File
@@ -53,7 +53,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
y: viewport.y ?? tY,
zoom: viewport.zoom ?? tZoom,
},
{ duration: options?.duration }
options
);
return Promise.resolve(true);
@@ -78,7 +78,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
y: centerY,
zoom: nextZoom,
},
{ duration: options?.duration }
{ duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate }
);
return Promise.resolve(true);
@@ -91,7 +91,11 @@ const useViewportHelper = (): ViewportHelperFunctions => {
return Promise.resolve(false);
}
await panZoom.setViewport(viewport, { duration: options?.duration });
await panZoom.setViewport(viewport, {
duration: options?.duration,
ease: options?.ease,
interpolate: options?.interpolate,
});
return Promise.resolve(true);
},
packages/react/src/types/general.ts
+5
View File
@@ -149,6 +149,7 @@ export type ViewportHelperFunctions = {
*
* @param viewport - the viewport to set
* @param options.duration - optional duration. If set, a transition will be applied
* @param options.ease - optional ease function.
*/
setViewport: SetViewport;
/**
@@ -164,6 +165,8 @@ export type ViewportHelperFunctions = {
* @param x - x position
* @param y - y position
* @param options.zoom - optional zoom
* @param options.duration - optional duration. If set, a transition will be applied
* @param options.ease - optional ease function.
*/
setCenter: SetCenter;
/**
@@ -173,6 +176,8 @@ export type ViewportHelperFunctions = {
*
* @param bounds - the bounds ({ x: number, y: number, width: number, height: number }) to fit the view to
* @param options.padding - optional padding
* @param options.duration - optional duration. If set, a transition will be applied
* @param options.ease - optional ease function.
*/
fitBounds: FitBounds;
/**
packages/react/src/types/nodes.ts
+1 -1
View File
@@ -12,7 +12,7 @@ import { NodeTypes } from './general';
*/
export type Node<
NodeData extends Record<string, unknown> = Record<string, unknown>,
NodeType extends string = string
NodeType extends string | undefined = string | undefined
> = NodeBase<NodeData, NodeType> & {
style?: CSSProperties;
className?: string;
packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
+23 -8
View File
@@ -1,21 +1,18 @@
<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
import { derived } from 'svelte/store';
import type { SvelteFlowStore } from '$lib/store/types';
import type { Node, Edge } from '$lib/types';
import type { Node, Edge } from '$lib/types';
import { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '.';
let { store }: { store: SvelteFlowStore<NodeType, EdgeType> } = $props();
</script>
<div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} style="display: none;">
<div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} class="a11y-hidden">
{store.disableKeyboardA11y
? store.labelConfig['a11yDescription.node.default']
: store.labelConfig['a11yDescription.node.keyboardDisabled']}
</div>
<div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} style="display: none;">
<div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} class="a11y-hidden">
{store.labelConfig['a11yDescription.edge.default']}
</div>
@@ -24,8 +21,26 @@
id={`${ARIA_LIVE_MESSAGE}-${store.flowId}`}
aria-live="assertive"
aria-atomic="true"
style="position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%);"
class="a11y-live-msg"
>
{store.ariaLiveMessage}
</div>
{/if}
{/if}
<style>
.a11y-hidden {
display: none;
}
.a11y-live-msg {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
overflow: hidden;
clip: rect(0px, 0px, 0px, 0px);
clip-path: inset(100%);
}
</style>
packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
+7 -3
View File
@@ -360,7 +360,7 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
y: nextViewport.y ?? currentViewport.y,
zoom: nextViewport.zoom ?? currentViewport.zoom
},
{ duration: options?.duration }
options
);
return Promise.resolve(true);
@@ -380,7 +380,7 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
y: store.height / 2 - y * nextZoom,
zoom: nextZoom
},
{ duration: options?.duration }
{ duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate }
);
return Promise.resolve(true);
@@ -402,7 +402,11 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
options?.padding ?? 0.1
);
await store.panZoom.setViewport(viewport, { duration: options?.duration });
await store.panZoom.setViewport(viewport, {
duration: options?.duration,
ease: options?.ease,
interpolate: options?.interpolate
});
return Promise.resolve(true);
},
packages/svelte/src/lib/index.ts
+2 -2
View File
@@ -55,10 +55,10 @@ export type {
EdgeTypes,
DefaultEdgeOptions
} from '$lib/types/edges';
export type { FitViewOptions, OnBeforeDelete } from '$lib/types/general';
export type * from '$lib/types/general';
export type { Node, NodeTypes, BuiltInNode, NodeProps, InternalNode } from '$lib/types/nodes';
export type { SvelteFlowStore } from '$lib/store/types';
export * from '$lib/types/events';
export type { SvelteFlowStore } from '$lib/store/types';
// system types
export {
packages/svelte/src/lib/store/index.ts
-4
View File
@@ -108,10 +108,6 @@ export function createStore<NodeType extends Node = Node, EdgeType extends Edge
}
store.nodes = store.nodes.map((node) => newNodes.get(node.id) ?? node);
if (!store.nodesInitialized) {
store.nodesInitialized = true;
}
}
function fitView(options?: FitViewOptions) {
packages/svelte/src/lib/types/edges.ts
-2
View File
@@ -85,8 +85,6 @@ export type EdgeProps<EdgeType extends Edge = Edge> = Omit<
'sourceHandle' | 'targetHandle'
> &
EdgePosition & {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
data?: any;
type: string;
markerStart?: string;
markerEnd?: string;
packages/svelte/src/lib/types/nodes.ts
+1 -1
View File
@@ -16,7 +16,7 @@ export type InternalNode<NodeType extends Node = Node> = InternalNodeBase<NodeTy
*/
export type Node<
NodeData extends Record<string, unknown> = Record<string, unknown>,
NodeType extends string = string
NodeType extends string | undefined = string | undefined
> = NodeBase<NodeData, NodeType> & {
class?: ClassValue;
style?: string;
packages/system/package.json
+2
View File
@@ -51,10 +51,12 @@
},
"dependencies": {
"@types/d3-drag": "^3.0.7",
"@types/d3-interpolate": "^3.0.4",
"@types/d3-selection": "^3.0.10",
"@types/d3-transition": "^3.0.8",
"@types/d3-zoom": "^3.0.8",
"d3-drag": "^3.0.0",
"d3-interpolate": "^3.0.1",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0"
},
packages/system/src/types/general.ts
+4
View File
@@ -130,6 +130,8 @@ export type FitViewOptionsBase<NodeType extends NodeBase = NodeBase> = {
minZoom?: number;
maxZoom?: number;
duration?: number;
ease?: (t: number) => number;
interpolate?: 'smooth' | 'linear';
nodes?: (NodeType | { id: string })[];
};
@@ -173,6 +175,8 @@ export enum PanOnScrollMode {
*/
export type ViewportHelperFunctionOptions = {
duration?: number;
ease?: (t: number) => number;
interpolate?: 'smooth' | 'linear';
};
export type SetCenterOptions = ViewportHelperFunctionOptions & {
packages/system/src/types/nodes.ts
+10 -4
View File
@@ -10,7 +10,7 @@ import { Optional } from '../utils/types';
*/
export type NodeBase<
NodeData extends Record<string, unknown> = Record<string, unknown>,
NodeType extends string = string
NodeType extends string | undefined = string | undefined
> = {
/** Unique id of a node. */
id: string;
@@ -21,8 +21,6 @@ export type NodeBase<
position: XYPosition;
/** Arbitrary data passed to a node. */
data: NodeData;
/** Type of node defined in `nodeTypes`. */
type?: NodeType;
/**
* Only relevant for default, source, target nodeType. Controls source position.
* @example 'right', 'left', 'top', 'bottom'
@@ -79,7 +77,15 @@ export type NodeBase<
width?: number;
height?: number;
};
};
} & (undefined extends NodeType
? {
/** Type of node defined in nodeTypes */
type?: string | undefined;
}
: {
/** Type of node defined in nodeTypes */
type: NodeType;
});
export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = Omit<NodeType, 'measured'> & {
measured: {
packages/system/src/types/panzoom.ts
+2
View File
@@ -20,6 +20,8 @@ export type PanZoomParams = {
export type PanZoomTransformOptions = {
duration?: number;
ease?: (t: number) => number;
interpolate?: 'smooth' | 'linear';
};
export type OnPanZoom = (event: MouseEvent | TouchEvent | null, viewport: Viewport) => void;
packages/system/src/utils/graph.ts
+5 -1
View File
@@ -378,7 +378,11 @@ export async function fitViewport<
options?.padding ?? 0.1
);
await panZoom.setViewport(viewport, { duration: options?.duration });
await panZoom.setViewport(viewport, {
duration: options?.duration,
ease: options?.ease,
interpolate: options?.interpolate,
});
return Promise.resolve(true);
}
packages/system/src/xypanzoom/XYPanZoom.ts
+23 -21
View File
@@ -1,5 +1,6 @@
import { type ZoomTransform, zoom, zoomTransform } from 'd3-zoom';
import { select } from 'd3-selection';
import { interpolateZoom, interpolate } from 'd3-interpolate';
import {
type CoordinateExtent,
@@ -19,6 +20,7 @@ import {
createZoomOnScrollHandler,
} from './eventhandler';
import { createFilter } from './filter';
import { transition } from 'd3-transition';
export type ZoomPanValues = {
isZoomingOrPanning: boolean;
@@ -78,8 +80,8 @@ export function XYPanZoom({
function setTransform(transform: ZoomTransform, options?: PanZoomTransformOptions) {
if (d3Selection) {
return new Promise<boolean>((resolve) => {
d3ZoomInstance?.transform(
getD3Transition(d3Selection, options?.duration, () => resolve(true)),
d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).transform(
getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
transform
);
});
@@ -114,22 +116,22 @@ export function XYPanZoom({
const wheelHandler = isPanOnScroll
? createPanOnScrollHandler({
zoomPanValues,
noWheelClassName,
d3Selection,
d3Zoom: d3ZoomInstance,
panOnScrollMode,
panOnScrollSpeed,
zoomOnPinch,
onPanZoomStart,
onPanZoom,
onPanZoomEnd,
})
zoomPanValues,
noWheelClassName,
d3Selection,
d3Zoom: d3ZoomInstance,
panOnScrollMode,
panOnScrollSpeed,
zoomOnPinch,
onPanZoomStart,
onPanZoom,
onPanZoomEnd,
})
: createZoomOnScrollHandler({
noWheelClassName,
preventScrolling,
d3ZoomHandler,
});
noWheelClassName,
preventScrolling,
d3ZoomHandler,
});
d3Selection.on('wheel.zoom', wheelHandler, { passive: false });
@@ -242,8 +244,8 @@ export function XYPanZoom({
function scaleTo(zoom: number, options?: PanZoomTransformOptions) {
if (d3Selection) {
return new Promise<boolean>((resolve) => {
d3ZoomInstance?.scaleTo(
getD3Transition(d3Selection, options?.duration, () => resolve(true)),
d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).scaleTo(
getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
zoom
);
});
@@ -255,8 +257,8 @@ export function XYPanZoom({
function scaleBy(factor: number, options?: PanZoomTransformOptions) {
if (d3Selection) {
return new Promise<boolean>((resolve) => {
d3ZoomInstance?.scaleBy(
getD3Transition(d3Selection, options?.duration, () => resolve(true)),
d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).scaleBy(
getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
factor
);
});
packages/system/src/xypanzoom/utils.ts
+6 -2
View File
@@ -1,5 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { type ZoomTransform, zoomIdentity } from 'd3-zoom';
import { transition } from 'd3-transition';
import { type D3SelectionInstance, type Viewport } from '../types';
import { isMacOs } from '../utils';
@@ -21,14 +22,17 @@ 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, onEnd = () => {}) => {
// taken from d3-ease: https://github.com/d3/d3-ease/blob/main/src/cubic.js
const defaultEase = (t: number) => ((t *= 2) <= 1 ? t * t * t : (t -= 2) * t * t + 2) / 2;
export const getD3Transition = (selection: D3SelectionInstance, duration = 0, ease = defaultEase, onEnd = () => {}) => {
const hasDuration = typeof duration === 'number' && duration > 0;
if (!hasDuration) {
onEnd();
}
return hasDuration ? selection.transition().duration(duration).on('end', onEnd) : selection;
return hasDuration ? selection.transition().duration(duration).ease(ease).on('end', onEnd) : selection;
};
export const wheelDelta = (event: any) => {