refactor to use app-rooted js imports

1 files changed, 59 insertions, 0 deletions

diff --git a/frontend/app/views/graph/components/page.handle.js b/frontend/app/views/graph/components/page.handle.js
new file mode 100644
index 0000000..c024f1e
--- /dev/null
+++ b/frontend/app/views/graph/components/page.handle.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { history } from 'app/store'
+
+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, onMouseEnter, onMouseLeave } = 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 className = (graph.home_page_id === page.id)
+      ? 'handle homepage'
+      : 'handle'
+    const url = '/' + graph.path + '/' + page.path
+    // console.log(style)
+    return (
+      <div
+        className={className}
+        ref={this.ref}
+        onMouseDown={onMouseDown}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onDoubleClick={() => history.push(url)}
+        style={style}
+      >
+        {page.path}
+        <Link to={url}>{'>'}</Link>
+      </div>
+    )
+  }
+}