Skip to content

Commit 63fab7d

Browse files
vasturianovasturiano
committed
Adjust hover/click props for VR/AR modes
1 parent 776f49f commit 63fab7d

File tree

9 files changed

+42
-44
lines changed

9 files changed

+42
-44
lines changed

‎README.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -214,19 +214,17 @@ Note that not all props listed below apply to all 4 components. The last 4 colum
214214

215215
| Prop | Type | Default | Description | 2D | 3D | VR | AR |
216216
| --- | :--: | :--: | --- | :--: | :--: | :--: | :--: |
217-
| <b>onNodeClick</b> | <i>func</i> | *-* | Callback function for node (left-button) clicks. The node object and the event object are included as arguments `onNodeClick(node, event)`. | :heavy_check_mark: | :heavy_check_mark: | | |
217+
| <b>onNodeClick</b> | <i>func</i> | *-* | Callback function for node (left-button) clicks. The node object and the event object are included as arguments `onNodeClick(node, event)`. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
218218
| <b>onNodeRightClick</b> | <i>func</i> | *-* | Callback function for node right-clicks. The node object and the event object are included as arguments `onNodeRightClick(node, event)`. | :heavy_check_mark: | :heavy_check_mark: | | |
219-
| <b>onNodeHover</b> | <i>func</i> | *-* | Callback function for node mouse over events. The node object (or `null` if there's no node under the mouse line of sight) is included as the first argument, and the previous node object (or null) as second argument: `onNodeHover(node, prevNode)`. | :heavy_check_mark: | :heavy_check_mark: | | |
220-
| <b>onNodeCenterHover</b> | <i>func</i> | *-* | For VR/AR only. Callback function for node hover events at the center of the viewport. The node object (or `null` if there's no node under the mouse line of sight) is included as the first argument, and the previous node object (or null) as second argument: `onNodeCenterHover(node, prevNode)`. | | | :heavy_check_mark: | :heavy_check_mark: |
219+
| <b>onNodeHover</b> | <i>func</i> | *-* | Callback function for node mouse over events. The node object (or `null` if there's no node under the pointer line of sight) is included as the first argument, and the previous node object (or null) as second argument: `onNodeHover(node, prevNode)`. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
221220
| <b>onNodeDrag</b> | <i>func</i> | *-* | Callback function for node drag interactions. This function is invoked repeatedly while dragging a node, every time its position is updated. The node object is included as the first argument, and the change in coordinates since the last iteration of this function are included as the second argument in format {x,y,z}: `onNodeDrag(node, translate)`. | :heavy_check_mark: | :heavy_check_mark: | | |
222221
| <b>onNodeDragEnd</b> | <i>func</i> | *-* | Callback function for the end of node drag interactions. This function is invoked when the node is released. The node object is included as the first argument, and the change in coordinates from the node's initial postion are included as the second argument in format {x,y,z}: `onNodeDragEnd(node, translate)`. | :heavy_check_mark: | :heavy_check_mark: | | |
223-
| <b>onLinkClick</b> | <i>func</i> | *-* | Callback function for link (left-button) clicks. The link object and the event object are included as arguments `onLinkClick(link, event)`. | :heavy_check_mark: | :heavy_check_mark: | | |
222+
| <b>onLinkClick</b> | <i>func</i> | *-* | Callback function for link (left-button) clicks. The link object and the event object are included as arguments `onLinkClick(link, event)`. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
224223
| <b>onLinkRightClick</b> | <i>func</i> | *-* | Callback function for link right-clicks. The link object and the event object are included as arguments `onLinkRightClick(link, event)`. | :heavy_check_mark: | :heavy_check_mark: | | |
225-
| <b>onLinkHover</b> | <i>func</i> | *-* | Callback function for link mouse over events. The link object (or `null` if there's no link under the mouse line of sight) is included as the first argument, and the previous link object (or null) as second argument: `onLinkHover(link, prevLink)`. | :heavy_check_mark: | :heavy_check_mark: | | |
226-
| <b>onLinkCenterHover</b> | <i>func</i> | *-* | For VR/AR only. Callback function for link hover events at the center of the viewport. The link object (or `null` if there's no link under the mouse line of sight) is included as the first argument, and the previous link object (or null) as second argument: `onLinkCenterHover(link, prevLink)`. | | | :heavy_check_mark: | :heavy_check_mark: |
224+
| <b>onLinkHover</b> | <i>func</i> | *-* | Callback function for link mouse over events. The link object (or `null` if there's no link under the pointer line of sight) is included as the first argument, and the previous link object (or null) as second argument: `onLinkHover(link, prevLink)`. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
227225
| <b>onBackgroundClick</b> | <i>func</i> | *-* | Callback function for click events on the empty space between the nodes and links. The event object is included as single argument `onBackgroundClick(event)`. | :heavy_check_mark: | :heavy_check_mark: | | |
228226
| <b>onBackgroundRightClick</b> | <i>func</i> | *-* | Callback function for right-click events on the empty space between the nodes and links. The event object is included as single argument `onBackgroundRightClick(event)`. | :heavy_check_mark: | :heavy_check_mark: | | |
229-
| <b>linkHoverPrecision</b> | <i>number</i> | 4 | Whether to display the link label when gazing the link closely (low value) or from far away (high value). | :heavy_check_mark: | :heavy_check_mark: |
227+
| <b>linkHoverPrecision</b> | <i>number</i> | 4 | Whether to display the link label when gazing the link closely (low value) or from far away (high value). | :heavy_check_mark: | :heavy_check_mark: | | |
230228
| <b>onZoom</b> | <i>func</i> | *-* | Callback function for zoom/pan events. The current zoom transform is included as single argument `onZoom({ k, x, y })`. Note that `onZoom` is triggered by user interaction as well as programmatic zooming/panning with `zoom()` and `centerAt()`. | :heavy_check_mark: | | | |
231229
| <b>onZoomEnd</b> | <i>func</i> | *-* | Callback function for on 'end' of zoom/pan events. The current zoom transform is included as single argument `onZoomEnd({ k, x, y })`. Note that `onZoomEnd` is triggered by user interaction as well as programmatic zooming/panning with `zoom()` and `centerAt()`. | :heavy_check_mark: | | | |
232230
| <b>controlType</b> | <i>string</i> | `trackball` | Which type of control to use to control the camera on 3D mode. Choice between [trackball](https://threejs.org/examples/misc_controls_trackball.html), [orbit](https://threejs.org/examples/#misc_controls_orbit) or [fly](https://threejs.org/examples/misc_controls_fly.html). | | :heavy_check_mark: | | |

‎package.json

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -40,29 +40,29 @@
4040
"dist/**/*"
4141
],
4242
"dependencies": {
43-
"3d-force-graph": "^1.69.4",
44-
"3d-force-graph-ar": "^1.6.6",
45-
"3d-force-graph-vr": "^1.35.6",
46-
"force-graph": "^1.40.2",
43+
"3d-force-graph": "^1.69.5",
44+
"3d-force-graph-ar": "^1.7.0",
45+
"3d-force-graph-vr": "^2.0.0",
46+
"force-graph": "^1.40.3",
4747
"prop-types": "^15.7.2",
4848
"react-kapsule": "^2.2.1"
4949
},
5050
"peerDependencies": {
5151
"react": "*"
5252
},
5353
"devDependencies": {
54-
"@babel/core": "^7.13.16",
54+
"@babel/core": "^7.14.0",
5555
"@babel/plugin-proposal-class-properties": "^7.13.0",
5656
"@babel/plugin-proposal-object-rest-spread": "^7.13.8",
57-
"@babel/preset-env": "^7.13.15",
57+
"@babel/preset-env": "^7.14.1",
5858
"@babel/preset-react": "^7.13.13",
5959
"@rollup/plugin-babel": "^5.3.0",
60-
"@rollup/plugin-commonjs": "^18.0.0",
61-
"@rollup/plugin-node-resolve": "^11.2.1",
60+
"@rollup/plugin-commonjs": "^19.0.0",
61+
"@rollup/plugin-node-resolve": "^13.0.0",
6262
"@rollup/plugin-replace": "^2.4.2",
63-
"@types/react": "^17.0.3",
63+
"@types/react": "^17.0.5",
6464
"rimraf": "^3.0.2",
65-
"rollup": "^2.45.2",
65+
"rollup": "^2.47.0",
6666
"rollup-plugin-dts": "^3.0.1",
6767
"rollup-plugin-terser": "^7.0.2",
6868
"typescript": "^4.2.4"

‎src/forcegraph-proptypes.js

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,12 @@ const commonPropTypes = {
1515
nodeVisibility: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.func]),
1616
nodeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
1717
nodeAutoColorBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
18+
onNodeHover: PropTypes.func,
19+
onNodeClick: PropTypes.func,
1820
linkSource: PropTypes.string,
1921
linkTarget: PropTypes.string,
2022
linkLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
2123
linkVisibility: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.func]),
22-
linkHoverPrecision: PropTypes.number,
2324
linkColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
2425
linkAutoColorBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
2526
linkWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
@@ -31,6 +32,8 @@ const commonPropTypes = {
3132
linkDirectionalParticleSpeed: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
3233
linkDirectionalParticleWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
3334
linkDirectionalParticleColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
35+
onLinkHover: PropTypes.func,
36+
onLinkClick: PropTypes.func,
3437
dagMode: PropTypes.oneOf(['td', 'bu', 'lr', 'rl', 'zin', 'zout', 'radialin', 'radialout']),
3538
dagLevelDistance: PropTypes.number,
3639
dagNodeFilter: PropTypes.func,
@@ -48,14 +51,11 @@ const commonPropTypes = {
4851

4952
const pointerBasedPropTypes = {
5053
zoomToFit: PropTypes.func,
51-
onNodeClick: PropTypes.func,
5254
onNodeRightClick: PropTypes.func,
53-
onNodeHover: PropTypes.func,
5455
onNodeDrag: PropTypes.func,
5556
onNodeDragEnd: PropTypes.func,
56-
onLinkClick: PropTypes.func,
5757
onLinkRightClick: PropTypes.func,
58-
onLinkHover: PropTypes.func,
58+
linkHoverPrecision: PropTypes.number,
5959
onBackgroundClick: PropTypes.func,
6060
onBackgroundRightClick: PropTypes.func,
6161
enablePointerInteraction: PropTypes.bool,
@@ -122,9 +122,7 @@ export const ForceGraphVRPropTypes = Object.assign({},
122122
threeBasedPropTypes,
123123
{
124124
nodeDesc: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
125-
linkDesc: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
126-
onNodeCenterHover: PropTypes.func,
127-
onLinkCenterHover: PropTypes.func
125+
linkDesc: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
128126
}
129127
);
130128

@@ -134,8 +132,6 @@ export const ForceGraphARPropTypes = Object.assign({},
134132
{
135133
markerAttrs: PropTypes.object,
136134
yOffset: PropTypes.number,
137-
glScale: PropTypes.number,
138-
onNodeCenterHover: PropTypes.func,
139-
onLinkCenterHover: PropTypes.func,
135+
glScale: PropTypes.number
140136
}
141137
);

‎src/packages/react-force-graph-2d/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"dist/**/*"
3636
],
3737
"dependencies": {
38-
"force-graph": "^1.40.2",
38+
"force-graph": "^1.40.3",
3939
"prop-types": "^15.7.2",
4040
"react-kapsule": "^2.2.1"
4141
},
@@ -44,6 +44,6 @@
4444
},
4545
"devDependencies": {
4646
"rimraf": "^3.0.2",
47-
"rollup": "^2.45.2"
47+
"rollup": "^2.47.0"
4848
}
4949
}

‎src/packages/react-force-graph-3d/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"dist/**/*"
3737
],
3838
"dependencies": {
39-
"3d-force-graph": "^1.69.4",
39+
"3d-force-graph": "^1.69.5",
4040
"prop-types": "^15.7.2",
4141
"react-kapsule": "^2.2.1"
4242
},
@@ -45,6 +45,6 @@
4545
},
4646
"devDependencies": {
4747
"rimraf": "^3.0.2",
48-
"rollup": "^2.45.2"
48+
"rollup": "^2.47.0"
4949
}
5050
}

‎src/packages/react-force-graph-ar/index.d.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,6 @@ export interface ForceGraphProps extends ConfigOptions {
5959
// Node styling
6060
nodeRelSize?: number;
6161
nodeVal?: NodeAccessor<number>;
62-
nodeLabel?: NodeAccessor<string>;
63-
nodeDesc?: NodeAccessor<string>;
6462
nodeVisibility?: NodeAccessor<boolean>;
6563
nodeColor?: NodeAccessor<string>;
6664
nodeAutoColorBy?: NodeAccessor<string | null>;
@@ -70,8 +68,6 @@ export interface ForceGraphProps extends ConfigOptions {
7068
nodeThreeObjectExtend?: NodeAccessor<boolean>;
7169

7270
// Link styling
73-
linkLabel?: LinkAccessor<string>;
74-
linkDesc?: LinkAccessor<string>;
7571
linkVisibility?: LinkAccessor<boolean>;
7672
linkColor?: LinkAccessor<string>;
7773
linkAutoColorBy?: LinkAccessor<string | null>;
@@ -112,8 +108,10 @@ export interface ForceGraphProps extends ConfigOptions {
112108
onEngineStop?: () => void;
113109

114110
// Interaction
115-
onNodeCenterHover?: (node: NodeObject | null, previousNode: NodeObject | null) => void;
116-
onLinkCenterHover?: (link: LinkObject | null, previousLink: LinkObject | null) => void;
111+
onNodeHover?: (node: NodeObject | null, previousNode: NodeObject | null) => void;
112+
onNodeClick?: (link: LinkObject) => void;
113+
onLinkHover?: (link: LinkObject | null, previousLink: LinkObject | null) => void;
114+
onLinkClick?: (link: LinkObject) => void;
117115
}
118116

119117
export interface ForceGraphMethods {

‎src/packages/react-force-graph-ar/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"dist/**/*"
3838
],
3939
"dependencies": {
40-
"3d-force-graph-ar": "^1.6.6",
40+
"3d-force-graph-ar": "^1.7.0",
4141
"prop-types": "^15.7.2",
4242
"react-kapsule": "^2.2.1"
4343
},
@@ -46,6 +46,6 @@
4646
},
4747
"devDependencies": {
4848
"rimraf": "^3.0.2",
49-
"rollup": "^2.45.2"
49+
"rollup": "^2.47.0"
5050
}
5151
}

‎src/packages/react-force-graph-vr/index.d.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ export interface ForceGraphProps extends ConfigOptions {
5757
glScale?: number;
5858

5959
// Node styling
60+
nodeLabel?: NodeAccessor<string>;
61+
nodeDesc?: NodeAccessor<string>;
6062
nodeRelSize?: number;
6163
nodeVal?: NodeAccessor<number>;
6264
nodeVisibility?: NodeAccessor<boolean>;
@@ -68,6 +70,8 @@ export interface ForceGraphProps extends ConfigOptions {
6870
nodeThreeObjectExtend?: NodeAccessor<boolean>;
6971

7072
// Link styling
73+
linkLabel?: LinkAccessor<string>;
74+
linkDesc?: LinkAccessor<string>;
7175
linkVisibility?: LinkAccessor<boolean>;
7276
linkColor?: LinkAccessor<string>;
7377
linkAutoColorBy?: LinkAccessor<string | null>;
@@ -108,8 +112,10 @@ export interface ForceGraphProps extends ConfigOptions {
108112
onEngineStop?: () => void;
109113

110114
// Interaction
111-
onNodeCenterHover?: (node: NodeObject | null, previousNode: NodeObject | null) => void;
112-
onLinkCenterHover?: (link: LinkObject | null, previousLink: LinkObject | null) => void;
115+
onNodeHover?: (node: NodeObject | null, previousNode: NodeObject | null) => void;
116+
onNodeClick?: (link: LinkObject) => void;
117+
onLinkHover?: (link: LinkObject | null, previousLink: LinkObject | null) => void;
118+
onLinkClick?: (link: LinkObject) => void;
113119
}
114120

115121
export interface ForceGraphMethods {

‎src/packages/react-force-graph-vr/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"dist/**/*"
3737
],
3838
"dependencies": {
39-
"3d-force-graph-vr": "^1.35.6",
39+
"3d-force-graph-vr": "^2.0.0",
4040
"prop-types": "^15.7.2",
4141
"react-kapsule": "^2.2.1"
4242
},
@@ -45,6 +45,6 @@
4545
},
4646
"devDependencies": {
4747
"rimraf": "^3.0.2",
48-
"rollup": "^2.45.2"
48+
"rollup": "^2.47.0"
4949
}
5050
}

0 commit comments

Comments
 (0)