nitpicking arrows

3 files changed, 186 insertions, 164 deletions

diff --git a/frontend/views/graph/components/graph.canvas.js b/frontend/views/graph/components/graph.canvas.js
new file mode 100644
index 0000000..fa74e50
--- /dev/null
+++ b/frontend/views/graph/components/graph.canvas.js
@@ -0,0 +1,131 @@
+import React, { Component } from 'react'
+
+import { mod, angle } from '../../../util'
+
+const DEFAULT_MEASUREMENT = { width: 16, height: 16 }
+const BACKLINK_SPACING = 10
+const ARROWHEAD_LENGTH = 10
+const GRAPH_LINK_COLOR = "#ff88ff"
+const GRAPH_BACKLINK_COLOR = "#88ffff"
+
+export default class GraphCanvas extends Component {
+  constructor(props) {
+    super(props)
+    this.canvasRef = React.createRef()
+  }
+  
+  componentDidMount() {
+    if (this.props.bounds) {
+      this.draw({})      
+    }
+  }
+  
+  componentDidUpdate(prevProps) {
+    this.draw(prevProps)
+  }
+
+  draw(prevProps) {
+    const { current: canvas } = this.canvasRef
+    const { bounds, pages, currentPage, box, measurements } = this.props
+    const { width, height } = bounds
+    if (prevProps.bounds !== bounds) {
+      canvas.width = width
+      canvas.height = height
+    }
+    const ctx = canvas.getContext('2d')
+    ctx.clearRect(0, 0, width, height)
+    ctx.lineWidth = 2
+    const coordsLookup = pages.reduce((a,b) => {
+      if (currentPage && box && b.id === currentPage.id) {
+        a[b.id] = {
+          x: box.x,
+          y: box.y,
+          backlinks: new Set([]),
+        }
+      } else {
+        a[b.id] = {
+          x: b.settings.x,
+          y: b.settings.y,
+          backlinks: new Set([]),
+        }
+      }
+      return a
+    }, {})
+    pages.map(page => {
+      const sourceCoord = coordsLookup[page.id]
+      page.backlinks.map(tile => {
+        if (tile.target_page_id <= 0) return
+        const targetCoord = coordsLookup[tile.page_id]
+        let tile_measurement = measurements[tile.page_id] || DEFAULT_MEASUREMENT
+        let target_measurement = measurements[tile.target_page_id] || DEFAULT_MEASUREMENT
+        let theta = angle(targetCoord.x, targetCoord.y, sourceCoord.x, sourceCoord.y)
+        let x1_offset = tile_measurement.width / 2 // * (0.5 - Math.cos(theta))
+        let y1_offset = tile_measurement.height / 2
+        let x2_offset = target_measurement.width / 2 // (0.5 - Math.cos(theta))
+        let y2_offset = target_measurement.height / 2
+        // skip duplicate links
+        if (sourceCoord.backlinks.has(tile.page_id)) {
+          return
+        }
+        /*
+          if it's pointing right, cos(t) is 1
+          if it's pointing left,  cos(t) is -1
+        */
+        // if (Math.abs(Math.cos(theta)) > 0.5) {
+        // x1_offset += target_measurement.width / 3 * (- Math.cos(theta))
+        // x1_offset += target_measurement.height / 4 * (- Math.sin(theta))
+        x2_offset += target_measurement.width / 3 * (- Math.cos(theta))
+        y2_offset += target_measurement.height / 6 * (- Math.sin(theta))
+        // }
+        // if this is the first time encountering this link...
+        if (!targetCoord.backlinks.has(tile.target_page_id)) {
+          sourceCoord.backlinks.add(tile.page_id)
+          ctx.strokeStyle = GRAPH_LINK_COLOR
+        } else { // otherwise this is a two-way link
+          x1_offset += BACKLINK_SPACING * Math.sin(theta)
+          y1_offset += BACKLINK_SPACING * Math.cos(theta)
+          x2_offset += BACKLINK_SPACING * Math.sin(theta)
+          y2_offset += BACKLINK_SPACING * Math.cos(theta)
+          // x1_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2)
+          // y1_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2)
+          // x2_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2)
+          // y2_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2)
+          ctx.strokeStyle = GRAPH_BACKLINK_COLOR
+        }
+        ctx.beginPath()
+        const x1 = targetCoord.x * width + x1_offset
+        const y1 = targetCoord.y * height + y1_offset
+        const x2 = sourceCoord.x * width + x2_offset
+        const y2 = sourceCoord.y * height + y2_offset
+        this.arrow(ctx, x1, y1, x2, y2)
+        ctx.stroke()
+      })
+    })
+  }
+  
+  arrow(ctx, x1, y1, x2, y2) {
+    const farOffset = 20
+    const endOffset = 1
+    const theta = angle(x1, y1, x2, y2)
+    x1 += Math.cos(theta) * 0
+    x2 -= Math.cos(theta) * farOffset
+    y1 += Math.sin(theta) * 0
+    y2 -= Math.sin(theta) * farOffset
+    const xEnd = x2 - Math.cos(theta) * endOffset
+    const yEnd = y2 - Math.sin(theta) * endOffset
+    const leftAngle = mod(theta - Math.PI / 6, Math.PI * 2)
+    const rightAngle = mod(theta + Math.PI / 6, Math.PI * 2)
+    ctx.moveTo(x1, y1)
+    ctx.lineTo(xEnd, yEnd)
+    ctx.moveTo(x2, y2)
+    ctx.lineTo(x2 - ARROWHEAD_LENGTH * Math.cos(leftAngle), y2 - ARROWHEAD_LENGTH * Math.sin(leftAngle))
+    ctx.moveTo(x2, y2)
+    ctx.lineTo(x2 - ARROWHEAD_LENGTH * Math.cos(rightAngle), y2 - ARROWHEAD_LENGTH * Math.sin(rightAngle))
+  }
+
+  render() {
+    return (
+      <canvas ref={this.canvasRef} />
+    )
+  }
+}
diff --git a/frontend/views/graph/components/graph.editor.js b/frontend/views/graph/components/graph.editor.js
index 87109bf..d11ecb1 100644
--- a/frontend/views/graph/components/graph.editor.js
+++ b/frontend/views/graph/components/graph.editor.js
@@ -11,6 +11,9 @@ import * as graphActions from '../graph.actions'
 import { Loader } from '../../../common'
 import { clamp, dist, mod, angle } from '../../../util'
 
+import GraphCanvas from './graph.canvas'
+import PageHandle from './page.handle'
+
 const defaultState = {
   dragging: false,
   bounds: null,
@@ -181,170 +184,6 @@ class GraphEditor extends Component {
   }
 }
 
-const DEFAULT_MEASUREMENT = { width: 16, height: 16 }
-const BACKLINK_SPACING = 10
-const ARROWHEAD_LENGTH = 10
-const GRAPH_LINK_COLOR = "#ff88ff"
-const GRAPH_BACKLINK_COLOR = "#88ffff"
-
-class GraphCanvas extends Component {
-  constructor(props) {
-    super(props)
-    this.canvasRef = React.createRef()
-  }
-  
-  componentDidMount() {
-    if (this.props.bounds) {
-      this.draw({})      
-    }
-  }
-  
-  componentDidUpdate(prevProps) {
-    this.draw(prevProps)
-  }
-
-  draw(prevProps) {
-    const { current: canvas } = this.canvasRef
-    const { bounds, pages, currentPage, box, measurements } = this.props
-    const { width, height } = bounds
-    if (prevProps.bounds !== bounds) {
-      canvas.width = width
-      canvas.height = height
-    }
-    const ctx = canvas.getContext('2d')
-    ctx.clearRect(0, 0, width, height)
-    ctx.lineWidth = 2
-    const coordsLookup = pages.reduce((a,b) => {
-      if (currentPage && box && b.id === currentPage.id) {
-        a[b.id] = {
-          x: box.x,
-          y: box.y,
-          backlinks: new Set([]),
-        }
-      } else {
-        a[b.id] = {
-          x: b.settings.x,
-          y: b.settings.y,
-          backlinks: new Set([]),
-        }
-      }
-      return a
-    }, {})
-    pages.map(page => {
-      const sourceCoord = coordsLookup[page.id]
-      page.backlinks.map(tile => {
-        if (tile.target_page_id <= 0) return
-        const targetCoord = coordsLookup[tile.page_id]
-        let tile_measurement = measurements[tile.page_id] || DEFAULT_MEASUREMENT
-        let target_measurement = measurements[tile.target_page_id] || DEFAULT_MEASUREMENT
-        let theta = angle(targetCoord.x, targetCoord.y, sourceCoord.x, sourceCoord.y)
-        let x1_offset = tile_measurement.width / 2 // * (0.5 - Math.cos(theta))
-        let y1_offset = tile_measurement.height / 2
-        let x2_offset = target_measurement.width / 2 // (0.5 - Math.cos(theta))
-        let y2_offset = target_measurement.height / 2
-        // skip duplicate links
-        if (sourceCoord.backlinks.has(tile.page_id)) {
-          return
-        }
-        // if this is the first time encountering this link...
-        if (!targetCoord.backlinks.has(tile.target_page_id)) {
-          sourceCoord.backlinks.add(tile.page_id)
-          ctx.strokeStyle = GRAPH_LINK_COLOR
-        } else { // otherwise this is a two-way link
-          x1_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2)
-          y1_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2)
-          x2_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2)
-          y2_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2)
-          ctx.strokeStyle = GRAPH_BACKLINK_COLOR
-        }
-        ctx.beginPath()
-        const x1 = targetCoord.x * width + x1_offset
-        const y1 = targetCoord.y * height + y1_offset
-        const x2 = sourceCoord.x * width + x2_offset
-        const y2 = sourceCoord.y * height + y2_offset
-        this.arrow(ctx, x1, y1, x2, y2)
-        ctx.stroke()
-      })
-    })
-  }
-  
-  arrow(ctx, x1, y1, x2, y2) {
-    const farOffset = 20
-    const endOffset = 1
-    const theta = angle(x1, y1, x2, y2)
-    x1 += Math.cos(theta) * 0
-    x2 -= Math.cos(theta) * farOffset
-    y1 += Math.sin(theta) * 0
-    y2 -= Math.sin(theta) * farOffset
-    const xEnd = x2 - Math.cos(theta) * endOffset
-    const yEnd = y2 - Math.sin(theta) * endOffset
-    const leftAngle = mod(theta - Math.PI / 6, Math.PI * 2)
-    const rightAngle = mod(theta + Math.PI / 6, Math.PI * 2)
-    ctx.moveTo(x1, y1)
-    ctx.lineTo(xEnd, yEnd)
-    ctx.moveTo(x2, y2)
-    ctx.lineTo(x2 - ARROWHEAD_LENGTH * Math.cos(leftAngle), y2 - ARROWHEAD_LENGTH * Math.sin(leftAngle))
-    ctx.moveTo(x2, y2)
-    ctx.lineTo(x2 - ARROWHEAD_LENGTH * Math.cos(rightAngle), y2 - ARROWHEAD_LENGTH * Math.sin(rightAngle))
-  }
-
-  render() {
-    return (
-      <canvas ref={this.canvasRef} />
-    )
-  }
-}
-
-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>
-    )
-  }
-}
-
 const mapStateToProps = state => ({
   graph: state.graph,
 })
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>
+    )
+  }
+}