dragging something

2 files changed, 159 insertions, 6 deletions

diff --git a/frontend/views/graph/components/graph.editor.js b/frontend/views/graph/components/graph.editor.js
index aa5d751..d4da2b6 100644
--- a/frontend/views/graph/components/graph.editor.js
+++ b/frontend/views/graph/components/graph.editor.js
@@ -6,24 +6,177 @@ import { connect } from 'react-redux'
 import { session } from '../../../session'
 
 import { Loader } from '../../../common'
+import { clamp } from '../../../util'
+
+const defaultState = {
+  dragging: false,
+  bounds: null,
+  mouseX: 0,
+  mouseY: 0,
+  box: {
+    x: 0, y: 0,
+    w: 0, h: 0,
+  },
+  page: null,
+}
 
 class GraphEditor extends Component {
   state = {
+    ...defaultState,
+  }
+
+  constructor() {
+    super()
+    // bind these events in the constructor, so we can remove event listeners later
+    this.handleMouseDown = this.handleMouseDown.bind(this)
+    this.handleMouseMove = this.handleMouseMove.bind(this)
+    this.handleMouseUp = this.handleMouseUp.bind(this)
+    this.handleWindowResize = this.handleWindowResize.bind(this)
+    this.graphRef = React.createRef()
+  }
+
+  getBoundingClientRect() {
+    if (!this.graphRef.current) return null
+    const rect = this.graphRef.current.getBoundingClientRect()
+    const scrollTop = document.body.scrollTop || document.body.parentNode.scrollTop
+    const scrollLeft = document.body.scrollLeft || document.body.parentNode.scrollLeft
+    const bounds = {
+      top: rect.top + scrollTop,
+      left: rect.left + scrollLeft,
+      width: rect.width,
+      height: rect.height,
+    }
+    // console.log(bounds)
+    return bounds
+  }
+
+  componentDidMount() {
+    document.body.addEventListener('mousemove', this.handleMouseMove)
+    document.body.addEventListener('mouseup', this.handleMouseUp)
+    window.addEventListener('resize', this.handleWindowResize)
+    this.setState({ bounds: this.getBoundingClientRect() })
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!this.state.bounds) {
+      this.setState({ bounds: this.getBoundingClientRect() })
+    }
+  }
+
+  handleWindowResize() {
+    this.setState({ bounds: this.getBoundingClientRect() })
+  }
+
+  handleMouseDown(e, page) {
+    const bounds = this.getBoundingClientRect()
+    const mouseX = e.pageX
+    const mouseY = e.pageY
+    let w = 128 / bounds.width
+    let h = 16 / bounds.height
+    let { x, y } = page.settings
+    x = clamp(x, 0, 1)
+    y = clamp(y, 0, 1)
+    this.setState({
+      page,
+      draggingBox: true,
+      bounds,
+      mouseX,
+      mouseY,
+      box: {
+        x, y,
+        w, h,
+      },
+      initialBox: {
+        x, y,
+        w, h,
+      }
+    })
+  }
+
+  handleMouseMove(e) {
+    const {
+      dragging, draggingBox,
+      bounds, mouseX, mouseY, initialBox, box
+    } = this.state
+    if (draggingBox) {
+      e.preventDefault()
+      let { x, y, w, h } = initialBox
+      let dx = (e.pageX - mouseX) / bounds.width
+      let dy = (e.pageY - mouseY) / bounds.height
+      this.setState({
+        box: {
+          x: clamp(x + dx, 0, 1.0 - w),
+          y: clamp(y + dy, 0, 1.0 - h),
+          w, h,
+        }
+      })
+    }
+  }
+
+  handleMouseUp(e) {
+    const { actions } = this.props
+    const { dragging, draggingBox, bounds, box } = this.state
+    if (!dragging && !draggingBox) return
+    e.preventDefault()
+    const { x, y, w, h } = box
+    let url = window.location.pathname
+    this.setState({
+      page: null,
+      box: null,
+      initialBox: null,
+      dragging: false,
+      draggingBox: false,
+    })
+    if (w < 10 / bounds.width || h < 10 / bounds.height) {
+      // too small...
+    } else {
+      // update page, settings.x/y
+    }
   }
 
   render(){
-    console.log(this.props.graph)
+    // console.log(this.props.graph.show.res)
+    const currentPage = this.state.page
+    const currentBox = this.state.box
     const { res } = this.props.graph.show
+    // console.log(res.pages)
     return (    
-      <div className='graph'>
-        {res.pages.map(page => {
-          console.log(page)
-        })}
+      <div className='graph' ref={this.graphRef}>
+        {this.state.bounds && res.pages.map(page => (
+          <PageHandle
+            key={page.id}
+            page={page}
+            bounds={this.state.bounds}
+            box={currentPage && page.id === currentPage.id && currentBox}
+            onMouseDown={e => this.handleMouseDown(e, page)}
+          />
+        ))}
       </div>
     )
   }
 }
 
+const PageHandle = ({ page, bounds, box, onMouseDown }) => {
+  let style;
+  if (box) {
+    style = {
+      top: (bounds.height) * box.y,
+      left: (bounds.width) * box.x,
+    }
+  } else {
+    style = {
+      top: (bounds.height) * Math.min(page.settings.y, 0.95),
+      left: (bounds.width) * Math.min(page.settings.x, 0.95),
+    }
+  }
+  // console.log(style)
+  return (
+    <div className='handle' onMouseDown={onMouseDown} style={style}>
+      {page.title}
+    </div>
+  )
+}
+
 const mapStateToProps = state => ({
   graph: state.graph,
 })
diff --git a/frontend/views/graph/components/page.form.js b/frontend/views/graph/components/page.form.js
index 54a96a1..26e30c9 100644
--- a/frontend/views/graph/components/page.form.js
+++ b/frontend/views/graph/components/page.form.js
@@ -11,7 +11,7 @@ const newPage = (data) => ({
   username: session('username'),
   description: '',
   settings: {
-    x: 10, y: 10,
+    x: 0.05, y: 0.05,
   },
   ...data,
 })