react-digraph
Advanced tools
react-digraph - npm Package Compare versions
Comparing version 8.0.0-alpha.1 to 8.0.0-beta.0
| { | ||
| "name": "react-digraph", | ||
| "description": "directed graph react component", | ||
| "version": "8.0.0-alpha.1", | ||
| "version": "8.0.0-beta.0", | ||
| "keywords": [ | ||
@@ -6,0 +6,0 @@ "uber-library", |
@@ -7,6 +7,26 @@ # react-digraph | ||
| ## Important v5.0.0 Information | ||
| Version 5.0.0 is a breaking change to some of the API interfaces. Many of the component attributes are the same, and the data format is the same, but there | ||
| have been some necessary changes to improve the API, make the component faster, and add new features. Many changes will be listed below in the deprecation notes section. If you notice a problem, please use the `^4.0.0` versions of the package and refer to the legacy documentation in the `v4.x.x` git branch. | ||
| ## Important v8.0.0 Information | ||
| Version 8.0.0 introduces multi-select nodes and edges using Ctrl-Shift-Mouse events (Cmd-Shift-mouse for Mac). This requires a breaking change. Instead of onSelectNode/Edge, you'll only provide one onSelect function callback and a `selected` object with `{ nodes: Map, and edges: Map }` as the parameter format. The [typings folder](typings/index.d.ts) has the exact type definition for these attributes. When either edges or nodes are selected the onSelect function will fire with the object. You will have to handle all nodes and edges selected, or if there is only one then you will have to determine if it's a node or edge within the onSelect function. | ||
| To disable multi-select you can set `allowMultiselect` to `false`, which disables the Ctrl-Shift-mouse event, but we will still use the `onSelect` function. Both `onSelectNode` and `onSelectEdge` are deprecated. | ||
| Breaking changes: | ||
| - `onPasteSelected` now accepts a `SelectionT` object for the first parameter | ||
| - `onPasteSelected` now accepts an `IPoint` instead | ||
| of a `XYCoords` array for the second parameter. | ||
| - `onDeleteSelected` is added which takes a `SelectionT` parameter. | ||
| - `onSelect` is added, which accepts `SelectionT` and `Event` parameters. | ||
| - `onUpdateNode` accepts a Map of updated nodes in the second parameter (for example, if multiple nodes are moved). | ||
| - `selected` is a new property to track selected nodes and edges. It is a `SelectionT` type. | ||
| - `canDeleteSelected` takes the place of `canDeleteNode` and `canDeleteEdge`. It accepts a `SelectionT` type as a parameter. | ||
| - `onDeleteNode` is removed | ||
| - `onDeleteEdge` is removed | ||
| - `selectedNode` is removed | ||
| - `selectedEdge` is removed | ||
| - `canDeleteNode` is removed | ||
| - `canDeleteEdge` is removed | ||
| - `selectedNodes` is removed | ||
| - `selectedEdges` is removed | ||
| ## Installation | ||
@@ -19,2 +39,3 @@ | ||
| If you don't have the following peerDependenies, make sure to install them: | ||
| ```bash | ||
@@ -116,3 +137,3 @@ npm install --save react react-dom | ||
| edgeTypes={EdgeTypes} | ||
| allowMultiselect={true} | ||
| allowMultiselect={true} // true by default, set to false to disable multi select. | ||
| onSelect={this.onSelect} | ||
@@ -187,3 +208,3 @@ onCreateNode={this.onCreateNode} | ||
| npm install | ||
| npm run serve | ||
| npm run example | ||
| ``` | ||
@@ -197,3 +218,7 @@ | ||
| - Click and drag nodes to change their position. | ||
| - To select multiple nodes, press Ctrl+Shift then click and drag the mouse. | ||
| - You may copy and paste selected nodes and edges with Ctrl+C and Ctrl+V | ||
| * Note: On Mac computers, use Cmd instead of Ctrl. | ||
| All props are detailed below. | ||
@@ -209,6 +234,4 @@ | ||
| | `edges` | `Array<IEdge>` | `true` | Array of graph edges. | | ||
| | `allowMultiselect` | `boolean` | `false` | Use Ctrl-Shift-LeftMouse to draw a multiple selection box | | ||
| | `allowMultiselect` | `boolean` | `false` | (default true) Use Ctrl-Shift-LeftMouse to draw a multiple selection box. | | ||
| | `selected` | `object` | `true` | The currently selected graph entity. | | ||
| | `selectedNodes` | `Map<string, INode>` | `false` | If allowMultiselect is true, this should be the currently selected array of nodes. | | ||
| | `selectedEdges` | `Map<string, IEdge>` | `false` | If allowMultiselect is true, this should be the currently selected array of edges. | | ||
| | `nodeTypes` | `object` | `true` | Config object of available node types. | | ||
@@ -218,11 +241,7 @@ | `nodeSubtypes` | `object` | `true` | Config object of available node subtypes. | | ||
| | `onSelect` | `func` | `false` | Called when nodes are selected when `allowMultiselect` is true. Is passed an object with nodes and edges included. | | ||
| | `onSelectNode` | `func` | `false` | To be Deprecated: 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. This function should also delete connected edges. | | ||
| | `onSelectEdge` | `func` | `true` | To be Deprecated: 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. This function is not called when multiple nodes and edges are selected using the allowMultiselect feature. Only when a single edge is selected. | | ||
| | `onUpdateNode` | `func` | `true` | Called when a node is moved.| | ||
| | `onCreateEdge` | `func` | `true` | Called when an edge is created.| | ||
| | `onSwapEdge` | `func` | `true` | Called when an edge `'target'` is swapped.| | ||
| | `onBackgroundClick` | `func` | `false` | Called when the background is clicked. | | ||
@@ -233,5 +252,4 @@ | `onArrowClicked` | `func` | `false` | Called when the arrow head is clicked. | | ||
| | `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. | | ||
| | `canDeleteSelected` | `func` | `false` | takes the place of `canDeleteNode` and `canDeleteEdge`. It accepts a `SelectionT` type as a parameter. It is called before a node or edge is deleted. The function should return a boolean. | ||
| | `canCreateEdge` | `func` | `false` | Called before an edge is created.| | ||
| | `canSwapEdge` | `func` | `false` | Called before an edge 'target' is swapped. | ||
@@ -238,0 +256,0 @@ | `afterRenderEdge` | `func` | `false` | Called after an edge is rendered. | |
@@ -105,3 +105,3 @@ /* | ||
| export type IGraphViewProps = { | ||
| allowMultiSelect?: boolean; | ||
| allowMultiselect?: boolean; | ||
| backgroundFillId?: string; | ||
@@ -128,5 +128,3 @@ edges: any[]; | ||
| readOnly?: boolean; | ||
| selected?: null | any; | ||
| selectedNodes?: null | Map<string, INode>; | ||
| selectedEdges?: null | Map<string, IEdge>; | ||
| selected?: null | SelectionT; | ||
| showGraphControls?: boolean; | ||
@@ -136,4 +134,3 @@ zoomDelay?: number; | ||
| canCreateEdge?: (startNode?: INode, endNode?: INode) => boolean; | ||
| canDeleteEdge?: (selected: any) => boolean; | ||
| canDeleteNode?: (selected: any) => boolean; | ||
| canDeleteSelected?: (selected: SelectionT) => boolean; | ||
| canSwapEdge?: ( | ||
@@ -148,14 +145,11 @@ sourceNode: INode, | ||
| onCreateNode?: (x: number, y: number, event: any) => void; | ||
| onDeleteEdge?: (selectedEdge: IEdge, edges: IEdge[]) => void; | ||
| onDeleteNode?: (selected: any, nodeId: string, nodes: any[]) => void; | ||
| onDeleteSelected?: (selected: SelectionT) => void; | ||
| onPasteSelected?: ( | ||
| selectedNode: INode, | ||
| xyCoords?: { x: number, y: number } | ||
| selected?: SelectionT | null, | ||
| xyCoords?: IPoint | ||
| ) => void, | ||
| onSelect?: (selected: SelectionT) => void; | ||
| onSelectEdge?: (selectedEdge: IEdge) => void; | ||
| onSelectNode?: (node: INode | null, event: any) => void; | ||
| onSelect?: (selected: SelectionT, event?: any) => void; | ||
| onSwapEdge?: (sourceNode: INode, targetNode: INode, edge: IEdge) => void; | ||
| onUndo?: () => void; | ||
| onUpdateNode?: (node: INode) => void; | ||
| onUpdateNode?: (node: INode, updatedNodes?: Map<string, INode> | null) => void; | ||
| renderBackground?: (gridSize?: number) => any; | ||
@@ -162,0 +156,0 @@ renderDefs?: () => any; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by5.54%
343
Worsened metrics
- Total package byte prevSize
- decreased by-0.17%
2039244
- Lines of code
- decreased by-0.43%
1611
No dependency changes