nitpicking arrows

1 files changed, 52 insertions, 0 deletions

diff --git a/frontend/views/graph/components/page.handle.js b/frontend/views/graph/components/page.handle.js
new file mode 100644
index 0000000..a0251bf
--- /dev/null
+++ b/frontend/views/graph/components/page.handle.js
@@ -0,0 +1,52 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+export default class PageHandle extends Component {
+  constructor(props){
+    super(props)
+    this.ref = React.createRef()
+  }
+  componentDidMount(){
+    this.measure()
+  }
+  componentDidUpdate(prevProps){
+    if (this.props.page.title !== prevProps.page.title) {
+      this.measure()
+    }
+  }
+  measure() {
+    const { offsetWidth: width, offsetHeight: height } = this.ref.current
+    const { id } = this.props.page
+    console.log(id, width, height)
+    this.props.onMeasure({ id, width, height })
+  }
+  render() {
+    const { graph, page, bounds, box, onMouseDown } = this.props
+    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),
+      }
+    }
+    const url = '/' + graph.path + '/' + page.path
+    // console.log(style)
+    return (
+      <div
+        className='handle'
+        ref={this.ref}
+        onMouseDown={onMouseDown}
+        onDoubleClick={() => history.push(url)}
+        style={style}
+      >
+        {page.title}
+        <Link to={url}>{'>'}</Link>
+      </div>
+    )
+  }
+}