summaryrefslogtreecommitdiff
path: root/frontend/views/graph/components/graph.editor.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/views/graph/components/graph.editor.js')
-rw-r--r--frontend/views/graph/components/graph.editor.js35
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>
)
}