getting to the page editor with add tile form

4 files changed, 33 insertions, 17 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>
   )
 }
diff --git a/frontend/views/graph/components/page.edit.js b/frontend/views/graph/components/page.edit.js
index f4f351b..1e59647 100644
--- a/frontend/views/graph/components/page.edit.js
+++ b/frontend/views/graph/components/page.edit.js
@@ -20,7 +20,7 @@ class PageEdit extends Component {
       .then(response => {
         // response
         console.log(response)
-        history.push('/' + data.path)
+        // history.push('/' + data.path)
       })
   }
 
diff --git a/frontend/views/graph/graph.css b/frontend/views/graph/graph.css
index a2ab8a4..73ac103 100644
--- a/frontend/views/graph/graph.css
+++ b/frontend/views/graph/graph.css
@@ -66,4 +66,9 @@
   user-select: none;
   cursor: arrow;
 }
-
+.handle a {
+  margin-left: 0.25rem;
+  color: #fff;
+  font-weight: bold;
+  text-decoration: none;
+}
diff --git a/frontend/views/graph/graph.reducer.js b/frontend/views/graph/graph.reducer.js
index 9e682e4..3dcea1d 100644
--- a/frontend/views/graph/graph.reducer.js
+++ b/frontend/views/graph/graph.reducer.js
@@ -42,6 +42,7 @@ export default function graphReducer(state = initialState, action) {
         editor: {
           ...state.editor,
           addingPage: true,
+          editingPage: false,
         }
       }
 
@@ -59,7 +60,8 @@ export default function graphReducer(state = initialState, action) {
         ...state,
         editor: {
           ...state.editor,
-          addingPage: true,
+          addingPage: false,
+          editingPage: true,
         }
       }
 
@@ -68,7 +70,7 @@ export default function graphReducer(state = initialState, action) {
         ...state,
         editor: {
           ...state.editor,
-          addingPage: false,
+          editingPage: false,
         }
       }