From 77c0d304f1fbd13f62c91e086b79eed2f430ef66 Mon Sep 17 00:00:00 2001 From: Jess Date: Sun, 14 Aug 2016 17:20:47 -0400 Subject: [PATCH 1/4] updating packages --- package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 265fde5..eeff1b4 100644 --- a/package.json +++ b/package.json @@ -24,13 +24,13 @@ "dependencies": { "classnames": "^2.2.0", "lodash": "^3.10.1", - "react": "^0.14.8", + "react": "^15.3.0", "react-anything-sortable": "^1.1.0", "react-color": "^2.0.0", "react-dom": "^0.14.8", "react-draggable": "^1.0.1", - "react-hotkeys": "^0.6.0", - "react-medium-editor": "^1.6.1", + "react-hotkeys": "^0.9.0", + "react-medium-editor": "^1.8.0", "react-redux": "^4.0.0", "redux": "^3.0.4", "redux-thunk": "^1.0.3", @@ -40,16 +40,16 @@ "titleize": "^1.0.0" }, "devDependencies": { - "babel-core": "^6.7.7", - "babel-jest": "^12.0.1", + "babel-core": "^6.13.2", + "babel-jest": "^14.1.0", "babel-loader": "^6.2.4", "babel-polyfill": "^6.7.4", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "css-loader": "^0.23.1", - "enzyme": "^2.2.0", + "enzyme": "^2.4.1", "jest-cli": "^12.0.1", - "react-addons-test-utils": "^0.14.8", + "react-addons-test-utils": "^15.3.0", "react-hot-loader": "^1.2.7", "redux-logger": "^2.3.1", "style-loader": "^0.13.0", From 62936cc9f8a0d0d5e1ecfdf91504388d2dfcd94d Mon Sep 17 00:00:00 2001 From: Jess Date: Tue, 16 Aug 2016 18:53:43 -0400 Subject: [PATCH 2/4] added highlight edge around hovered node ability --- app/actions.js | 5 +++++ app/components/Edge.jsx | 10 +++++----- app/components/Graph.jsx | 13 ++++++++++++- app/components/Node.jsx | 14 ++++++++++++-- app/components/Root.jsx | 9 ++++++--- app/main.jsx | 6 +++++- app/models/Graph.js | 1 + app/reducers/editTools.js | 8 ++++++-- app/reducers/graph.js | 8 +++++++- app/styles/oligrapher.css | 2 +- 10 files changed, 60 insertions(+), 16 deletions(-) diff --git a/app/actions.js b/app/actions.js index e5e7e20..a23d5bb 100644 --- a/app/actions.js +++ b/app/actions.js @@ -32,6 +32,7 @@ export const DELETE_SELECTION = 'DELETE_SELECTION'; export const UPDATE_NODE = 'UPDATE_NODE'; export const UPDATE_EDGE = 'UPDATE_EDGE'; export const UPDATE_CAPTION = 'UPDATE_CAPTION'; +export const SET_HOVERED_NODE = 'SET_HOVERED_NODE'; export const PRUNE_GRAPH = 'PRUNE_GRAPH'; export const LAYOUT_CIRCLE = 'LAYOUT_CIRCLE'; export const DELETE_ALL = 'DELETE_ALL'; @@ -176,6 +177,10 @@ export function updateCaption(captionId, data) { return { type: UPDATE_CAPTION, captionId, data }; } +export function setHoveredNode(node) { + return { type: SET_HOVERED_NODE, node }; +} + export function pruneGraph() { return { type: PRUNE_GRAPH }; } diff --git a/app/components/Edge.jsx b/app/components/Edge.jsx index d472fe7..e0d8345 100644 --- a/app/components/Edge.jsx +++ b/app/components/Edge.jsx @@ -12,7 +12,7 @@ export default class Edge extends BaseComponent { this.bindAll('_handleDragStart', '_handleDrag', '_handleDragStop', '_handleClick', '_handleTextClick'); // need control point immediately for dragging let { cx, cy } = this._calculateGeometry(props.edge.display); - this.state = merge({}, props.edge.display, { cx, cy }); + this.state = merge({}, props.edge.display, { cx, cy }, {"hoveringOnNode": props.hoveringOnConnectedNode}); } render() { @@ -21,7 +21,8 @@ export default class Edge extends BaseComponent { let width = 1 + (e.display.scale - 1) * 5; let selected = this.props.selected; let highlighted = e.display.status == "highlighted"; - + let hoveredOn = this.props.hoveringOnConnectedNode ? "hoveredOn" : null; + return ( this.draggable = c} @@ -30,7 +31,7 @@ export default class Edge extends BaseComponent { onStart={this._handleDragStart} onDrag={this._handleDrag} onStop={this._handleDragStop}> - + { selected ? { this.edges[e.id] = c; if (c) { c.graph = this; } }} key={e.id} edge={e} @@ -77,7 +87,8 @@ export default class Graph extends BaseComponent { { this.nodes[n.id] = c; if (c) { c.graph = this; } }} key={n.id} - node={n} + node={n} + setHoveredNode={this.props.setHoveredNode} graph={this.props.graph} zoom={this.props.zoom} selected={this.props.selection && includes(this.props.selection.nodeIds, n.id)} diff --git a/app/components/Node.jsx b/app/components/Node.jsx index e56d0ec..8d4f9e6 100644 --- a/app/components/Node.jsx +++ b/app/components/Node.jsx @@ -12,7 +12,7 @@ import Helpers from '../models/Helpers'; export default class Node extends BaseComponent { constructor(props) { super(props); - this.bindAll('_handleDragStart', '_handleDrag', '_handleDragStop', '_handleClick'); + this.bindAll('_handleDragStart', '_handleDrag', '_handleDragStop', '_handleClick', '_highlightEdges', '_removeHighlightEdges'); this.state = props.node.display; } @@ -33,7 +33,9 @@ export default class Node extends BaseComponent { id={groupId} className="node" transform={transform} - onClick={this._handleClick}> + onClick={this._handleClick} + onMouseEnter={this._highlightEdges} + onMouseLeave={this._removeHighlightEdges}> { this.state.name ? : null } @@ -60,6 +62,14 @@ export default class Node extends BaseComponent { }; } + _highlightEdges(){ + this.props.setHoveredNode(this.props.node.id); + } + + _removeHighlightEdges(){ + this.props.setHoveredNode(null); + } + // while dragging node and its edges are updated only in state, not store _handleDrag(e, ui) { if (this.props.isLocked) return; diff --git a/app/components/Root.jsx b/app/components/Root.jsx index b690a00..6baa03b 100644 --- a/app/components/Root.jsx +++ b/app/components/Root.jsx @@ -10,13 +10,13 @@ import { loadGraph, showGraph, deleteSelection, deselectAll, pruneGraph, layoutCircle, addNode, addEdge, addCaption, - updateNode, updateEdge, updateCaption, + updateNode, updateEdge, updateCaption, setHoveredNode, deleteAll, addSurroundingNodes, fetchInterlocks, toggleEditTools, toggleAddForm, setNodeResults, setTitle, loadAnnotations, showAnnotation, createAnnotation, - toggleAnnotations, updateAnnotation, + toggleAnnotations, updateAnnotation, deleteAnnotation, moveAnnotation, toggleHelpScreen, setSettings, toggleSettings } from '../actions'; import Graph from './Graph'; @@ -45,7 +45,7 @@ class Root extends Component { } render() { - let { dispatch, graph, selection, isEditor, isLocked, title, + let { dispatch, graph, selection, isEditor, hoveredNode, isLocked, title, showEditTools, showSaveButton, showHelpScreen, hasSettings, graphSettings, showSettings, onSave, currentIndex, annotation, annotations, visibleAnnotations } = this.props; @@ -157,6 +157,8 @@ class Root extends Component { { this.graph = c; if (c) { c.root = this; } }} {...this.props} + setHoveredNode={(nodeId) => dispatch(setHoveredNode(nodeId))} + hoveredNode={this.props.hoveredNode} graph={annotatedGraph ? annotatedGraph : graph} isEditor={isEditor} isLocked={isLocked} @@ -360,6 +362,7 @@ function select(state) { graph: state.graph.present, canUndo: state.graph.past.length > 0, canRedo: state.graph.future.length > 0, + hoveredNode: state.editTools.hoveredNode, selection: state.selection, zoom: state.zoom, showEditTools: state.editTools.visible, diff --git a/app/main.jsx b/app/main.jsx index 4f7f303..5147cd2 100644 --- a/app/main.jsx +++ b/app/main.jsx @@ -15,7 +15,7 @@ import { loadGraph, showGraph, newGraph, pruneGraph, layoutCircle, setHighlights, clearHighlights, loadAnnotations, setTitle, - toggleEditTools } from './actions'; + toggleEditTools, setHoveredNode } from './actions'; import Graph from './models/Graph'; import merge from 'lodash/object/merge'; import assign from 'lodash/object/assign'; @@ -220,6 +220,10 @@ class Oligrapher { return this.root.getWrappedInstance().props.graph.captions[captionId]; } + setHoveredNode(node) { + this.root.dispatchProps.dispatch(setHoveredNode(node)); + } + prune() { this.root.dispatchProps.dispatch(pruneGraph()); } diff --git a/app/models/Graph.js b/app/models/Graph.js index 165cb02..3bbafe1 100644 --- a/app/models/Graph.js +++ b/app/models/Graph.js @@ -598,6 +598,7 @@ class Graph { let sin = Math.sin(angle); return { x: x * cos - y * sin, y: x * sin + y * cos }; } + } module.exports = Graph; diff --git a/app/reducers/editTools.js b/app/reducers/editTools.js index 659a7d4..69c9251 100644 --- a/app/reducers/editTools.js +++ b/app/reducers/editTools.js @@ -1,10 +1,11 @@ import { TOGGLE_EDIT_TOOLS, TOGGLE_ADD_FORM, SET_NODE_RESULTS, - CREATE_ANNOTATION } from '../actions'; + CREATE_ANNOTATION, SET_HOVERED_NODE } from '../actions'; const initState = { visible: false, addForm: null, - nodeResults: [] + nodeResults: [], + hoveredNode: null }; export default function editTools(state = initState, action) { @@ -24,6 +25,9 @@ export default function editTools(state = initState, action) { case CREATE_ANNOTATION: return Object.assign({}, state, { visible: false }); + case SET_HOVERED_NODE: + return Object.assign({}, state, { hoveredNode: action.node }); + default: return state; } diff --git a/app/reducers/graph.js b/app/reducers/graph.js index 18a59b2..9a36cf7 100644 --- a/app/reducers/graph.js +++ b/app/reducers/graph.js @@ -9,8 +9,13 @@ import { LOAD_GRAPH, SHOW_GRAPH, NEW_GRAPH, SET_HIGHLIGHTS, TOGGLE_EDIT_TOOLS } from '../actions'; import Graph from '../models/Graph'; import Edge from '../models/Edge'; +import merge from 'lodash/object/merge'; -export default function graph(state = null, action) { +const initState = { + hoveredNode: null +}; + +export default function graph(state = initState, action) { let newState, graph; switch (action.type) { @@ -98,6 +103,7 @@ export default function graph(state = null, action) { case SET_HIGHLIGHTS: return Graph.setHighlights(state, action.highlights, action.otherwiseFaded); + default: return state; } diff --git a/app/styles/oligrapher.css b/app/styles/oligrapher.css index 0b1ddc5..266ae67 100644 --- a/app/styles/oligrapher.css +++ b/app/styles/oligrapher.css @@ -22,7 +22,7 @@ a.nodeLabel text tspan { display: none; } -#oligrapherContainer:hover .edge:hover text, .edge.selected text, .edge.highlighted text { +#oligrapherContainer:hover .edge:hover text, .edge.selected text, .edge.highlighted text, #oligrapherContainer:hover .edge.hoveredOn text{ display: inline; } From 1558690eea04c6b5f0eb322a29dc2d7dbcf58422 Mon Sep 17 00:00:00 2001 From: Jess Date: Tue, 16 Aug 2016 19:25:26 -0400 Subject: [PATCH 3/4] added tests for hoverednode state --- app/reducers/__tests__/editTools-test.js | 37 ++++++++++++++++++++++++ app/reducers/graph.js | 5 +--- 2 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 app/reducers/__tests__/editTools-test.js diff --git a/app/reducers/__tests__/editTools-test.js b/app/reducers/__tests__/editTools-test.js new file mode 100644 index 0000000..8c1fea4 --- /dev/null +++ b/app/reducers/__tests__/editTools-test.js @@ -0,0 +1,37 @@ +jest.unmock("../editTools"); +jest.unmock('../../actions'); +jest.unmock("lodash"); + +import reducer from "../editTools"; +import {setHoveredNode} from '../../actions'; + + +describe("editTools reducer", ()=>{ + + it("should return initial state", () => { + expect(reducer(undefined, {})).toEqual({visible: false, addForm: null, + nodeResults: [], hoveredNode: null }); + }); + + describe('SET_HOVERED_NODE', ()=>{ + + it('sets hoveredNode to the nodeId passed in', ()=>{ + expect(reducer({hoveredNode: null}, { + type: 'SET_HOVERED_NODE', + node: "nodeA" + })).toEqual({"hoveredNode": "nodeA"}) + }); + + it('sets hoveredNode to null when null is passed in', ()=>{ + expect(reducer({hoveredNode: "nodeB"}, { + type: 'SET_HOVERED_NODE', + node: null + })).toEqual({"hoveredNode": null}) + }); + + }); + + + + +}); diff --git a/app/reducers/graph.js b/app/reducers/graph.js index 9a36cf7..a717272 100644 --- a/app/reducers/graph.js +++ b/app/reducers/graph.js @@ -11,11 +11,8 @@ import Graph from '../models/Graph'; import Edge from '../models/Edge'; import merge from 'lodash/object/merge'; -const initState = { - hoveredNode: null -}; -export default function graph(state = initState, action) { +export default function graph(state = null, action) { let newState, graph; switch (action.type) { From d288742acbc3247351155555ece675795f07171c Mon Sep 17 00:00:00 2001 From: Jess Date: Thu, 18 Aug 2016 10:23:40 -0400 Subject: [PATCH 4/4] reverted to older package.json... updated by accident --- package.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index eeff1b4..ffba721 100644 --- a/package.json +++ b/package.json @@ -24,13 +24,13 @@ "dependencies": { "classnames": "^2.2.0", "lodash": "^3.10.1", - "react": "^15.3.0", + "react": "^0.14.8", "react-anything-sortable": "^1.1.0", "react-color": "^2.0.0", "react-dom": "^0.14.8", "react-draggable": "^1.0.1", - "react-hotkeys": "^0.9.0", - "react-medium-editor": "^1.8.0", + "react-hotkeys": "^0.6.0", + "react-medium-editor": "^1.6.1", "react-redux": "^4.0.0", "redux": "^3.0.4", "redux-thunk": "^1.0.3", @@ -40,16 +40,16 @@ "titleize": "^1.0.0" }, "devDependencies": { - "babel-core": "^6.13.2", - "babel-jest": "^14.1.0", + "babel-core": "^6.7.7", + "babel-jest": "^12.0.1", "babel-loader": "^6.2.4", "babel-polyfill": "^6.7.4", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "css-loader": "^0.23.1", - "enzyme": "^2.4.1", + "enzyme": "^2.2.0", "jest-cli": "^12.0.1", - "react-addons-test-utils": "^15.3.0", + "react-addons-test-utils": "^0.14.8", "react-hot-loader": "^1.2.7", "redux-logger": "^2.3.1", "style-loader": "^0.13.0", @@ -72,4 +72,4 @@ "/node_modules/" ] } -} +} \ No newline at end of file