diff options
| -rw-r--r-- | frontend/api/crud.reducer.js | 4 | ||||
| -rw-r--r-- | frontend/views/graph/components/graph.canvas.js | 13 | ||||
| -rw-r--r-- | frontend/views/graph/components/graph.editor.js | 6 | ||||
| -rw-r--r-- | frontend/views/page/page.reducer.js | 2 |
4 files changed, 17 insertions, 8 deletions
diff --git a/frontend/api/crud.reducer.js b/frontend/api/crud.reducer.js index baf2536..dd1fe48 100644 --- a/frontend/api/crud.reducer.js +++ b/frontend/api/crud.reducer.js @@ -115,12 +115,12 @@ export const crudReducer = (type) => { ...state, update: action.data, index: addToIndex(state.index, action.data.res, state.options.sort), - show: { + show: (state.show && state.show.res) ? { res: (state.show.res.id === action.data.res.id ? { ...state.show.res, ...action.data.res, } : state.show.res), - } + } : {} } case crud_type.index_error: return { diff --git a/frontend/views/graph/components/graph.canvas.js b/frontend/views/graph/components/graph.canvas.js index fa74e50..d10de4f 100644 --- a/frontend/views/graph/components/graph.canvas.js +++ b/frontend/views/graph/components/graph.canvas.js @@ -7,6 +7,8 @@ const BACKLINK_SPACING = 10 const ARROWHEAD_LENGTH = 10 const GRAPH_LINK_COLOR = "#ff88ff" const GRAPH_BACKLINK_COLOR = "#88ffff" +const GRAPH_UNHOVER_LINK_COLOR = "#884488" +const GRAPH_UNHOVER_BACKLINK_COLOR = "#448888" export default class GraphCanvas extends Component { constructor(props) { @@ -26,7 +28,7 @@ export default class GraphCanvas extends Component { draw(prevProps) { const { current: canvas } = this.canvasRef - const { bounds, pages, currentPage, box, measurements } = this.props + const { bounds, pages, currentPage, box, measurements, highlightedPageId } = this.props const { width, height } = bounds if (prevProps.bounds !== bounds) { canvas.width = width @@ -56,6 +58,7 @@ export default class GraphCanvas extends Component { page.backlinks.map(tile => { if (tile.target_page_id <= 0) return const targetCoord = coordsLookup[tile.page_id] + const isHighlightedPage = !highlightedPageId || highlightedPageId === page.id || highlightedPageId === tile.page_id let tile_measurement = measurements[tile.page_id] || DEFAULT_MEASUREMENT let target_measurement = measurements[tile.target_page_id] || DEFAULT_MEASUREMENT let theta = angle(targetCoord.x, targetCoord.y, sourceCoord.x, sourceCoord.y) @@ -80,7 +83,9 @@ export default class GraphCanvas extends Component { // if this is the first time encountering this link... if (!targetCoord.backlinks.has(tile.target_page_id)) { sourceCoord.backlinks.add(tile.page_id) - ctx.strokeStyle = GRAPH_LINK_COLOR + ctx.strokeStyle = isHighlightedPage + ? GRAPH_LINK_COLOR + : GRAPH_UNHOVER_LINK_COLOR } else { // otherwise this is a two-way link x1_offset += BACKLINK_SPACING * Math.sin(theta) y1_offset += BACKLINK_SPACING * Math.cos(theta) @@ -90,7 +95,9 @@ export default class GraphCanvas extends Component { // y1_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2) // x2_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2) // y2_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2) - ctx.strokeStyle = GRAPH_BACKLINK_COLOR + ctx.strokeStyle = isHighlightedPage + ? GRAPH_BACKLINK_COLOR + : GRAPH_UNHOVER_BACKLINK_COLOR } ctx.beginPath() const x1 = targetCoord.x * width + x1_offset diff --git a/frontend/views/graph/components/graph.editor.js b/frontend/views/graph/components/graph.editor.js index a5c7c45..f0a5753 100644 --- a/frontend/views/graph/components/graph.editor.js +++ b/frontend/views/graph/components/graph.editor.js @@ -23,6 +23,7 @@ const defaultState = { w: 0, h: 0, }, page: null, + highlightedPageId: null, measurements: {}, } @@ -161,13 +162,15 @@ class GraphEditor extends Component { } handleMouseEnter(e, page) { + this.setState({ highlightedPageId: page.id }) } handleMouseLeave(e, page) { + this.setState({ highlightedPageId: null }) } render(){ // console.log(this.props.graph.show.res) - const { page: currentPage, box, measurements } = this.state + const { page: currentPage, box, measurements, highlightedPageId } = this.state const { res: graph } = this.props.graph.show // console.log(res.pages) return ( @@ -176,6 +179,7 @@ class GraphEditor extends Component { bounds={this.state.bounds} pages={graph.pages} currentPage={currentPage} + highlightedPageId={highlightedPageId} measurements={measurements} box={box} /> diff --git a/frontend/views/page/page.reducer.js b/frontend/views/page/page.reducer.js index bbbe6f9..462be37 100644 --- a/frontend/views/page/page.reducer.js +++ b/frontend/views/page/page.reducer.js @@ -21,7 +21,6 @@ export default function pageReducer(state = initialState, action) { state = reducer(state, action) switch (action.type) { case types.tile.create: - console.log(action.data.res) return { ...state, show: { @@ -34,7 +33,6 @@ export default function pageReducer(state = initialState, action) { } case types.page.update: - console.log(action.data.res, state.show.res) if (state.show.res && state.show.res.id === action.data.res.id) { return { ...state, |