Skip to content

Commit

Permalink
- 178 - Added multiselect ability using the allowMultiSelect property
Browse files Browse the repository at this point in the history 
- Added more details to the README.
- If allowMultiSelect is enabled then always use the onSelectNodes instead of onSelectNode.
  • Loading branch information
@ajbogh
ajbogh committed Jan 12, 2021
1 parent c320122 commit 9ea6aec
Show file tree
Hide file tree
Showing 12 changed files with 610 additions and 159 deletions.
18 changes: 14 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,21 +201,28 @@ All props are detailed below.
| `nodeKey` | `string` | `true` | Key for D3 to update nodes(typ. UUID). |
| `nodes` | `Array<INode>` | `true` | Array of graph nodes. |
| `edges` | `Array<IEdge>` | `true` | Array of graph edges. |
| `selected` | `object` | `true` | The currently selected graph entity. |
| `allowMultiselect` | `boolean` | `false` | Use Ctrl-Shift-LeftMouse to draw a multiple selection box |
| `selected` | `object` | `true` | The currently selected graph entity. |
| `selectedNodes` | `Array<INode>` | `false` | If allowMultiselect is true, this should be the currently selected array of nodes. |
| `selectedEdges` | `Array<IEdge>` | `true` | If allowMultiselect is true, this should be the currently selected array of edges. |
| `nodeTypes` | `object` | `true` | Config object of available node types. |
| `nodeSubtypes` | `object` | `true` | Config object of available node subtypes. |
| `edgeTypes` | `object` | `true` | Config object of available edge types. |
| `onSelectNode` | `func` | `true` | Called when a node is selected. |
| `onSelect` | `func` | `false` | Called when nodes are selected when `allowMultiselect` is true. Is passed an object with nodes and edges included. |
| `onSelectNode` | `func` | `false` | Called when a node is selected. |
| `onCreateNode` | `func` | `true` | Called when a node is created. |
| `onContextMenu` | `func` | `true` | Called when contextmenu event triggered. |
| `onUpdateNode` | `func` | `true` | Called when a node is moved. |
| `onDeleteNode` | `func` | `true` | Called when a node is deleted. |
| `onSelectEdge` | `func` | `true` | Called when an edge is selected. |
| `onSelectEdge` | `func` | `true` | Called when an edge is selected. |
| `onCreateEdge` | `func` | `true` | Called when an edge is created. |
| `onSwapEdge` | `func` | `true` | Called when an edge `'target'` is swapped. |
| `onDeleteEdge` | `func` | `true` | Called when an edge is deleted. |
| `onBackgroundClick` | `func` | `false` | Called when the background is clicked. |
| `onArrowClicked` | `func` | `false` | Called when the arrow head is clicked. |
| `onUndo` | `func` | `false` | A function called when Ctrl-Z is activated. React-digraph does not keep track of actions, this must be implemented in the client website. |
| `onCopySelected` | `func` | `false` | A function called when Ctrl-C is activated. React-digraph does not keep track of copied nodes or edges, the this must be implemented in the client website. |
| `onPasteSelected` | `func` | `false` | A function called when Ctrl-V is activated. React-digraph does not keep track of copied nodes or edges, the this must be implemented in the client website.
| `canDeleteNode` | `func` | `false` | Called before a node is deleted. |
| `canCreateEdge` | `func` | `false` | Called before an edge is created. |
| `canDeleteEdge` | `func` | `false` | Called before an edge is deleted. |
Expand All @@ -238,7 +245,7 @@ All props are detailed below.
| `edgeArrowSize` | `number` | `false` | Edge arrow size in pixels. Default 8. Set to 0 to hide arrow. |
| `zoomDelay` | `number` | `false` | Delay before zoom occurs. |
| `zoomDur` | `number` | `false` | Duration of zoom transition. |
| `showGraphControls` | `boolean` | `false` | Whether to show zoom controls. |
| `showGraphControls` | `boolean` | `false` | Whether to show zoom controls. |
| `layoutEngineType` | `typeof LayoutEngineType` | `false` | Uses a pre-programmed layout engine, such as `'SnapToGrid'` |
| `rotateEdgeHandle` | `boolean` | `false` | Whether to rotate edge handle with edge when a node is moved |
| `centerNodeOnMove` | `boolean` | `false` | Whether the node should be centered on cursor when moving a node |
Expand Down Expand Up @@ -281,6 +288,9 @@ Prop Types:
nodeSubtypes: any;
edgeTypes: any;
selected: any;
selectedNodes: INode[];
selectedEdges: IEdge[];
onSelect?: ({ nodes: INode[], edges: IEdge[]) => void,
onBackgroundClick?: (x: number, y: number) => void;
onDeleteNode: (selected: any, nodeId: string, nodes: any[]) => void;
onSelectNode: (node: INode | null) => void;
Expand Down
2 changes: 0 additions & 2 deletions __tests__/components/graph-controls.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
// @flow

import * as React from 'react';

import { shallow } from 'enzyme';

import GraphControls from '../../src/components/graph-controls';

describe('GraphControls component', () => {
Expand Down
17 changes: 11 additions & 6 deletions __tests__/components/graph-view.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -404,17 +404,22 @@ describe('GraphView component', () => {
expect(result.props.targetNode).toEqual(nodes[1]);
});

it('handles missing nodes', () => {
it('returns null when sourceNode is not found', () => {
const edge = {
source: 'a',
source: 'fake',
target: 'b',
};
const result = instance.getEdgeComponent(edge);
expect(result).toEqual(null);
});

expect(result.type.prototype.constructor.name).toEqual('Edge');
expect(result.props.data).toEqual(edge);
expect(result.props.sourceNode).toEqual(null);
expect(result.props.targetNode).toEqual(undefined);
it('returns null when targetNode is not found and targetPosition is not defined', () => {
const edge = {
source: 'a',
target: 'fake',
};
const result = instance.getEdgeComponent(edge);
expect(result).toEqual(null);
});

it('handles a targetPosition', () => {
Expand Down
4 changes: 2 additions & 2 deletions src/components/graph-controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ import { DEFAULT_MAX_ZOOM, DEFAULT_MIN_ZOOM, SLIDER_STEPS } from '../constants';
import { useZoomLevelToSliderValue } from '../hooks/useZoomLevelToSliderValue';
import faExpand from '@fortawesome/fontawesome-free/svgs/solid/expand.svg';

const parsedIcon = Parse(faExpand); // parse SVG once
const ExpandIcon = () => parsedIcon; // convert SVG to react component
const parsedExpandIcon = Parse(faExpand); // parse SVG once
const ExpandIcon = () => parsedExpandIcon; // convert SVG to react component

type IGraphControlProps = {
maxZoom?: number,
Expand Down
4 changes: 4 additions & 0 deletions src/components/graph-view-props.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export type IBBox = {
};

export type IGraphViewProps = {
allowMultiselect?: boolean,
backgroundFillId?: string,
disableBackspace?: boolean,
edges: any[],
Expand All @@ -50,6 +51,8 @@ export type IGraphViewProps = {
nodeTypes: any,
readOnly?: boolean,
selected?: null | any,
selectedNodes?: null | INode[],
selectedEdges?: null | IEdge[],
showGraphControls?: boolean,
zoomDelay?: number,
zoomDur?: number,
Expand All @@ -72,6 +75,7 @@ export type IGraphViewProps = {
selectedNode: INode,
xyCoords?: { x: number, y: number }
) => void,
onSelect?: ({ nodes: INode[] | null, edges: IEdge[] | null }) => void,
onSelectEdge?: (selectedEdge: IEdge) => void,
onSelectNode?: (node: INode | null, event: any) => void,
onSwapEdge?: (sourceNode: INode, targetNode: INode, edge: IEdge) => void,
Expand Down

0 comments on commit 9ea6aec

Please sign in to comment.