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

refactor(userselection): use store for handling updates

Browse Source
This commit is contained in:
moklick
2020-04-20 13:20:51 +02:00
parent 75d51ecc03
commit 6354aa4330
21 changed files with 9614 additions and 6636 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/ReactFlow.esm.js
Vendored
+1320 -964
View File
File diff suppressed because it is too large Load Diff
dist/ReactFlow.esm.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/ReactFlow.js
Vendored
+1266 -910
View File
File diff suppressed because it is too large Load Diff
dist/ReactFlow.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/components/Nodes/utils.d.ts
Vendored
+2
View File
@@ -0,0 +1,2 @@
import { HandleElement } from '../../types';
export declare const getHandleBounds: (selector: string, nodeElement: HTMLDivElement, parentBounds: ClientRect | DOMRect, k: number) => HandleElement[] | null;
dist/components/NodesSelection/index.d.ts
Vendored
+4
View File
@@ -1,3 +1,7 @@
/**
* The nodes selection rectangle gets displayed when a user
* made a selectio with on or several nodes
*/
import React from 'react';
declare const _default: React.MemoExoticComponent<() => JSX.Element>;
export default _default;
dist/components/UserSelection/index.d.ts
Vendored
+3
View File
@@ -1,3 +1,6 @@
/**
* The user selection rectangle gets displayed when a user drags the mouse while pressing shift
*/
import React from 'react';
declare type UserSelectionProps = {
isInteractive: boolean;
dist/contexts/NodeIdContext.d.ts
Vendored
+2 -2
View File
@@ -2,6 +2,6 @@
import { ElementId } from '../types';
declare type ContextProps = ElementId | null;
export declare const NodeIdContext: import("react").Context<ContextProps>;
export declare const Provider: import("react").ProviderExoticComponent<import("react").ProviderProps<ContextProps>>;
export declare const Consumer: import("react").ExoticComponent<import("react").ConsumerProps<ContextProps>>;
export declare const Provider: import("react").Provider<ContextProps>;
export declare const Consumer: import("react").Consumer<ContextProps>;
export default NodeIdContext;
dist/hooks/useElementUpdater.d.ts
Vendored
+2 -2
View File
@@ -1,3 +1,3 @@
import { Node, Edge } from '../types';
declare const useElementUpdater: (elements: (Node | Edge)[]) => void;
import { Elements } from '../types';
declare const useElementUpdater: (elements: Elements) => void;
export default useElementUpdater;
dist/store/hooks.d.ts
Vendored
+12 -12
View File
@@ -4,19 +4,15 @@ export declare const useStoreActions: <Result>(mapActions: (actions: import("eas
d3Zoom: import("d3-zoom").ZoomBehavior<Element, unknown> | null;
d3Selection: import("d3-selection").Selection<Element, unknown, null, undefined> | null;
selection: import("../types").SelectionRect | null;
userSelectionRect: import("../types").SelectionRect;
connectionPosition: import("../types").XYPosition;
onConnect: import("../types").OnConnectFunc;
setOnConnect: import("easy-peasy").Action<StoreModel, import("../types").OnConnectFunc>;
setNodes: import("easy-peasy").Action<StoreModel, import("../types").Node[]>;
setEdges: import("easy-peasy").Action<StoreModel, import("../types").Edge[]>;
updateNodeData: import("easy-peasy").Action<StoreModel, {
updateNodeDimensions: import("easy-peasy").Action<StoreModel, {
id: string;
width: number;
height: number;
handleBounds: {
source: import("../types").HandleElement[] | null;
target: import("../types").HandleElement[] | null;
};
nodeElement: HTMLDivElement;
}>;
updateNodePos: import("easy-peasy").Action<StoreModel, {
id: string;
@@ -27,7 +23,7 @@ export declare const useStoreActions: <Result>(mapActions: (actions: import("eas
isActive: boolean;
selection?: import("../types").SelectionRect | undefined;
}>;
setSelectedElements: import("easy-peasy").Action<StoreModel, import("../types").Node | import("../types").Edge | (import("../types").Node | import("../types").Edge)[]>;
setSelectedElements: import("easy-peasy").Action<StoreModel, import("../types").Node | import("../types").Edge | import("../types").Elements>;
updateSelection: import("easy-peasy").Action<StoreModel, import("../types").SelectionRect>;
updateTransform: import("easy-peasy").Action<StoreModel, {
x: number;
@@ -46,15 +42,18 @@ export declare const useStoreActions: <Result>(mapActions: (actions: import("eas
setConnectionPosition: import("easy-peasy").Action<StoreModel, import("../types").XYPosition>;
setConnectionSourceId: import("easy-peasy").Action<StoreModel, string | null>;
setInteractive: import("easy-peasy").Action<StoreModel, boolean>;
setUserSelection: import("easy-peasy").Action<StoreModel, import("../types").XYPosition>;
updateUserSelection: import("easy-peasy").Action<StoreModel, import("../types").XYPosition>;
unsetUserSelection: import("easy-peasy").Action<StoreModel, void>;
}, "1">) => Result) => Result;
export declare const useStoreDispatch: () => import("easy-peasy").Dispatch<StoreModel, import("redux").Action<any>>;
export declare const useStoreState: <Result>(mapState: (state: import("easy-peasy").IntermediateStateMapper<{
export declare const useStoreState: <Result>(mapState: (state: import("easy-peasy").StateMapper<{
width: number;
height: number;
transform: [number, number, number];
transform: import("../types").Transform;
nodes: import("../types").Node[];
edges: import("../types").Edge[];
selectedElements: (import("../types").Node | import("../types").Edge)[];
selectedElements: import("../types").Elements;
selectedNodesBbox: import("../types").Rect;
d3Zoom: import("d3-zoom").ZoomBehavior<Element, unknown> | null;
d3Selection: import("d3-selection").Selection<Element, unknown, null, undefined> | null;
@@ -62,10 +61,11 @@ export declare const useStoreState: <Result>(mapState: (state: import("easy-peas
nodesSelectionActive: boolean;
selectionActive: boolean;
selection: import("../types").SelectionRect | null;
userSelectionRect: import("../types").SelectionRect;
connectionSourceId: string | null;
connectionPosition: import("../types").XYPosition;
snapToGrid: boolean;
snapGrid: [number, number];
isInteractive: boolean;
onConnect: import("../types").OnConnectFunc;
}, "1">) => Result, dependencies?: any[] | undefined) => Result;
}, "1">) => Result, equalityFn?: ((prev: Result, next: Result) => boolean) | undefined) => Result;
dist/store/index.d.ts
Vendored
+9 -92
View File
@@ -1,6 +1,6 @@
import { Action } from 'easy-peasy';
import { Selection as D3Selection, ZoomBehavior } from 'd3';
import { ElementId, Elements, Transform, Node, Edge, Rect, Dimensions, XYPosition, OnConnectFunc, SelectionRect, HandleElement } from '../types';
import { ElementId, Elements, Transform, Node, Edge, Rect, Dimensions, XYPosition, OnConnectFunc, SelectionRect } from '../types';
declare type TransformXYK = {
x: number;
y: number;
@@ -10,14 +10,9 @@ declare type NodePosUpdate = {
id: ElementId;
pos: XYPosition;
};
declare type NodeUpdate = {
declare type NodeDimensionUpdate = {
id: ElementId;
width: number;
height: number;
handleBounds: {
source: HandleElement[] | null;
target: HandleElement[] | null;
};
nodeElement: HTMLDivElement;
};
declare type SelectionUpdate = {
isActive: boolean;
@@ -45,6 +40,7 @@ export interface StoreModel {
nodesSelectionActive: boolean;
selectionActive: boolean;
selection: SelectionRect | null;
userSelectionRect: SelectionRect;
connectionSourceId: ElementId | null;
connectionPosition: XYPosition;
snapToGrid: boolean;
@@ -54,7 +50,7 @@ export interface StoreModel {
setOnConnect: Action<StoreModel, OnConnectFunc>;
setNodes: Action<StoreModel, Node[]>;
setEdges: Action<StoreModel, Edge[]>;
updateNodeData: Action<StoreModel, NodeUpdate>;
updateNodeDimensions: Action<StoreModel, NodeDimensionUpdate>;
updateNodePos: Action<StoreModel, NodePosUpdate>;
setSelection: Action<StoreModel, boolean>;
setNodesSelection: Action<StoreModel, SelectionUpdate>;
@@ -67,88 +63,9 @@ export interface StoreModel {
setConnectionPosition: Action<StoreModel, XYPosition>;
setConnectionSourceId: Action<StoreModel, ElementId | null>;
setInteractive: Action<StoreModel, boolean>;
setUserSelection: Action<StoreModel, XYPosition>;
updateUserSelection: Action<StoreModel, XYPosition>;
unsetUserSelection: Action<StoreModel>;
}
declare const store: {
getState: () => import("easy-peasy").IntermediateStateMapper<{
width: number;
height: number;
transform: [number, number, number];
nodes: Node[];
edges: Edge[];
selectedElements: (Node | Edge)[];
selectedNodesBbox: Rect;
d3Zoom: ZoomBehavior<Element, unknown> | null;
d3Selection: D3Selection<Element, unknown, null, undefined> | null;
d3Initialised: boolean;
nodesSelectionActive: boolean;
selectionActive: boolean;
selection: SelectionRect | null;
connectionSourceId: string | null;
connectionPosition: XYPosition;
snapToGrid: boolean;
snapGrid: [number, number];
isInteractive: boolean;
onConnect: OnConnectFunc;
}, "1">;
subscribe: (listener: () => void) => import("redux").Unsubscribe;
replaceReducer: (nextReducer: import("redux").Reducer<import("easy-peasy").IntermediateStateMapper<{
width: number;
height: number;
transform: [number, number, number];
nodes: Node[];
edges: Edge[];
selectedElements: (Node | Edge)[];
selectedNodesBbox: Rect;
d3Zoom: ZoomBehavior<Element, unknown> | null;
d3Selection: D3Selection<Element, unknown, null, undefined> | null;
d3Initialised: boolean;
nodesSelectionActive: boolean;
selectionActive: boolean;
selection: SelectionRect | null;
connectionSourceId: string | null;
connectionPosition: XYPosition;
snapToGrid: boolean;
snapGrid: [number, number];
isInteractive: boolean;
onConnect: OnConnectFunc;
}, "1">, import("redux").AnyAction>) => void;
dispatch: import("easy-peasy").Dispatch<StoreModel, import("redux").Action<any>>;
addModel: <ModelSlice extends object>(key: string, modelSlice: ModelSlice) => void;
clearMockedActions: () => void;
getActions: () => import("easy-peasy").ActionMapper<{
selectedNodesBbox: Rect;
d3Zoom: ZoomBehavior<Element, unknown> | null;
d3Selection: D3Selection<Element, unknown, null, undefined> | null;
selection: SelectionRect | null;
connectionPosition: XYPosition;
onConnect: OnConnectFunc;
setOnConnect: Action<StoreModel, OnConnectFunc>;
setNodes: Action<StoreModel, Node[]>;
setEdges: Action<StoreModel, Edge[]>;
updateNodeData: Action<StoreModel, NodeUpdate>;
updateNodePos: Action<StoreModel, NodePosUpdate>;
setSelection: Action<StoreModel, boolean>;
setNodesSelection: Action<StoreModel, SelectionUpdate>;
setSelectedElements: Action<StoreModel, Node | Edge | (Node | Edge)[]>;
updateSelection: Action<StoreModel, SelectionRect>;
updateTransform: Action<StoreModel, TransformXYK>;
updateSize: Action<StoreModel, Dimensions>;
initD3: Action<StoreModel, D3Init>;
setSnapGrid: Action<StoreModel, SetSnapGrid>;
setConnectionPosition: Action<StoreModel, XYPosition>;
setConnectionSourceId: Action<StoreModel, string | null>;
setInteractive: Action<StoreModel, boolean>;
}, "1">;
getListeners: () => import("easy-peasy").ListenerMapper<{
selectedNodesBbox: Rect;
d3Zoom: ZoomBehavior<Element, unknown> | null;
d3Selection: D3Selection<Element, unknown, null, undefined> | null;
selection: SelectionRect | null;
connectionPosition: XYPosition;
onConnect: OnConnectFunc;
}, "1">;
getMockedActions: () => import("easy-peasy").MockedAction[];
reconfigure: <NewStoreModel extends object>(model: NewStoreModel) => void;
removeModel: (key: string) => void;
};
declare const store: import("easy-peasy").Store<StoreModel, import("easy-peasy").EasyPeasyConfig<{}, any>>;
export default store;
dist/utils/graph.d.ts
Vendored
+7 -7
View File
@@ -1,14 +1,14 @@
import { Node, Edge, XYPosition, Rect, FitViewParams } from '../types';
import { Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams } from '../types';
export declare const isEdge: (element: Node | Edge) => boolean;
export declare const isNode: (element: Node | Edge) => boolean;
export declare const getOutgoers: (node: Node, elements: (Node | Edge)[]) => (Node | Edge)[];
export declare const removeElements: (elementsToRemove: (Node | Edge)[], elements: (Node | Edge)[]) => (Node | Edge)[];
export declare const addEdge: (edgeParams: Edge, elements: (Node | Edge)[]) => (Node | Edge)[];
export declare const parseElement: (element: Node | Edge, transform: [number, number, number], snapToGrid: boolean, snapGrid: [number, number]) => Node | Edge;
export declare const getOutgoers: (node: Node, elements: Elements) => Elements;
export declare const removeElements: (elementsToRemove: Elements, elements: Elements) => Elements;
export declare const addEdge: (edgeParams: Edge, elements: Elements) => Elements;
export declare const parseElement: (element: Node | Edge, transform: Transform, snapToGrid: boolean, snapGrid: [number, number]) => Node | Edge;
export declare const getBoundsofRects: (rect1: Rect, rect2: Rect) => Rect;
export declare const getRectOfNodes: (nodes: Node[]) => Rect;
export declare const graphPosToZoomedPos: ({ x, y }: XYPosition, [tx, ty, tScale]: [number, number, number]) => XYPosition;
export declare const getNodesInside: (nodes: Node[], rect: Rect, [tx, ty, tScale]?: [number, number, number], partially?: boolean) => Node[];
export declare const graphPosToZoomedPos: ({ x, y }: XYPosition, [tx, ty, tScale]: Transform) => XYPosition;
export declare const getNodesInside: (nodes: Node[], rect: Rect, [tx, ty, tScale]?: Transform, partially?: boolean) => Node[];
export declare const getConnectedEdges: (nodes: Node[], edges: Edge[]) => Edge[];
export declare const fitView: ({ padding }?: FitViewParams) => void;
export declare const zoomIn: () => void;