diff options
Diffstat (limited to 'frontend/views/graph/components/graph.editor.js')
| -rw-r--r-- | frontend/views/graph/components/graph.editor.js | 35 |
1 files changed, 22 insertions, 13 deletions
diff --git a/frontend/views/graph/components/graph.editor.js b/frontend/views/graph/components/graph.editor.js index 1b2d446..5093327 100644 --- a/frontend/views/graph/components/graph.editor.js +++ b/frontend/views/graph/components/graph.editor.js @@ -1,14 +1,15 @@ import React, { Component } from 'react' -import { Route } from 'react-router-dom' +import { Route, Link } from 'react-router-dom' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' +import { history } from '../../../store' import { session } from '../../../session' import actions from '../../../actions' import * as graphActions from '../graph.actions' import { Loader } from '../../../common' -import { clamp } from '../../../util' +import { clamp, dist } from '../../../util' const defaultState = { dragging: false, @@ -80,7 +81,7 @@ class GraphEditor extends Component { y = clamp(y, 0, 1) this.setState({ page, - draggingBox: true, + dragging: true, bounds, mouseX, mouseY, @@ -97,10 +98,10 @@ class GraphEditor extends Component { handleMouseMove(e) { const { - dragging, draggingBox, + dragging, bounds, mouseX, mouseY, initialBox, box } = this.state - if (draggingBox) { + if (dragging) { e.preventDefault() let { x, y, w, h } = initialBox let dx = (e.pageX - mouseX) / bounds.width @@ -117,9 +118,10 @@ class GraphEditor extends Component { handleMouseUp(e) { // const { actions } = this.props - const { dragging, draggingBox, bounds, box, page } = this.state - if (!dragging && !draggingBox) return + const { dragging, bounds, initialBox, box, page } = this.state + if (!dragging) return e.preventDefault() + const { width, height } = bounds const { x, y, w, h } = box let url = window.location.pathname this.setState({ @@ -127,9 +129,8 @@ class GraphEditor extends Component { box: null, initialBox: null, dragging: false, - draggingBox: false, }) - // console.log(page) + if (dist(width * x, height * y, width * initialBox.x, height * initialBox.y) < 3) return const updatedPage = { ...page, settings: { @@ -145,13 +146,14 @@ class GraphEditor extends Component { // console.log(this.props.graph.show.res) const currentPage = this.state.page const currentBox = this.state.box - const { res } = this.props.graph.show + const { res: graph } = this.props.graph.show // console.log(res.pages) return ( <div className='graph' ref={this.graphRef}> - {this.state.bounds && res.pages.map(page => ( + {this.state.bounds && graph.pages.map(page => ( <PageHandle key={page.id} + graph={graph} page={page} bounds={this.state.bounds} box={currentPage && page.id === currentPage.id && currentBox} @@ -163,7 +165,7 @@ class GraphEditor extends Component { } } -const PageHandle = ({ page, bounds, box, onMouseDown }) => { +const PageHandle = ({ graph, page, bounds, box, onMouseDown }) => { let style; if (box) { style = { @@ -176,10 +178,17 @@ const PageHandle = ({ page, bounds, box, onMouseDown }) => { left: (bounds.width) * Math.min(page.settings.x, 0.95), } } + const url = '/' + graph.path + '/' + page.path // console.log(style) return ( - <div className='handle' onMouseDown={onMouseDown} style={style}> + <div + className='handle' + onMouseDown={onMouseDown} + onDoubleClick={() => history.push(url)} + style={style} + > {page.title} + <Link to={url}>{'>'}</Link> </div> ) } |
