diff options
Diffstat (limited to 'frontend/views/graph')
| -rw-r--r-- | frontend/views/graph/components/graph.editor.js | 108 |
1 files changed, 75 insertions, 33 deletions
diff --git a/frontend/views/graph/components/graph.editor.js b/frontend/views/graph/components/graph.editor.js index d2f7194..f8b45f9 100644 --- a/frontend/views/graph/components/graph.editor.js +++ b/frontend/views/graph/components/graph.editor.js @@ -21,6 +21,7 @@ const defaultState = { w: 0, h: 0, }, page: null, + measurements: {}, } class GraphEditor extends Component { @@ -36,6 +37,7 @@ class GraphEditor extends Component { this.handleMouseUp = this.handleMouseUp.bind(this) this.handleWindowResize = this.handleWindowResize.bind(this) this.graphRef = React.createRef() + this.measurements = {} } getBoundingClientRect() { @@ -66,6 +68,13 @@ class GraphEditor extends Component { } } + addMeasurement({ id, width, height }) { + this.measurements[id] = { width, height } + this.setState({ + measurements: { ...this.measurements }, + }) + } + handleWindowResize() { this.setState({ bounds: this.getBoundingClientRect() }) } @@ -144,7 +153,7 @@ class GraphEditor extends Component { render(){ // console.log(this.props.graph.show.res) - const { page: currentPage, box } = this.state + const { page: currentPage, box, measurements } = this.state const { res: graph } = this.props.graph.show // console.log(res.pages) return ( @@ -153,6 +162,7 @@ class GraphEditor extends Component { bounds={this.state.bounds} pages={graph.pages} currentPage={currentPage} + measurements={measurements} box={box} /> {this.state.bounds && graph.pages.map(page => ( @@ -163,6 +173,7 @@ class GraphEditor extends Component { bounds={this.state.bounds} box={currentPage && page.id === currentPage.id && box} onMouseDown={e => this.handleMouseDown(e, page)} + onMeasure={measurement => this.addMeasurement(measurement)} /> ))} </div> @@ -170,6 +181,8 @@ class GraphEditor extends Component { } } +const DEFAULT_MEASUREMENT = { width: 16, height: 16 } + class GraphCanvas extends Component { constructor(props) { super(props) @@ -188,12 +201,13 @@ class GraphCanvas extends Component { draw(prevProps) { const { current: canvas } = this.canvasRef - const { bounds, pages, currentPage, box } = this.props + const { bounds, pages, currentPage, box, measurements } = this.props const { width, height } = bounds if (prevProps.bounds !== bounds) { canvas.width = width canvas.height = height } + console.log(measurements) const ctx = canvas.getContext('2d') ctx.clearRect(0, 0, width, height) ctx.lineWidth = 2 @@ -218,8 +232,12 @@ class GraphCanvas extends Component { page.backlinks.map(tile => { if (tile.target_page_id <= 0) return const targetCoord = coordsLookup[tile.page_id] - let xOffset = 16 - let yOffset = 16 + let tile_measurement = measurements[tile.page_id] || DEFAULT_MEASUREMENT + let target_measurement = measurements[tile.target_page_id] || DEFAULT_MEASUREMENT + let x1_offset = tile_measurement.width / 2 + let y1_offset = tile_measurement.height / 2 + let x2_offset = target_measurement.width / 2 + let y2_offset = target_measurement.height / 2 let theta = angle(targetCoord.x, targetCoord.y, sourceCoord.x, sourceCoord.y) // skip duplicate links if (sourceCoord.backlinks.has(tile.page_id)) { @@ -230,15 +248,17 @@ class GraphCanvas extends Component { sourceCoord.backlinks.add(tile.page_id) ctx.strokeStyle = "#ff88ff" } else { // otherwise this is a two-way link - xOffset += 10 * Math.cos(theta + Math.PI /2) - yOffset += 10 * Math.sin(theta + Math.PI /2) + x1_offset += 10 * Math.cos(theta + Math.PI /2) + y1_offset += 10 * Math.sin(theta + Math.PI /2) + x2_offset += 10 * Math.cos(theta + Math.PI /2) + y2_offset += 10 * Math.sin(theta + Math.PI /2) ctx.strokeStyle = "#88ffff" } ctx.beginPath() - const x1 = targetCoord.x * width + xOffset - const y1 = targetCoord.y * height + yOffset - const x2 = sourceCoord.x * width + xOffset - const y2 = sourceCoord.y * height + yOffset + 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() }) @@ -273,32 +293,54 @@ class GraphCanvas extends Component { } } -const PageHandle = ({ graph, page, bounds, box, onMouseDown }) => { - let style; - if (box) { - style = { - top: (bounds.height) * box.y, - left: (bounds.width) * box.x, +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() } - } else { - style = { - top: (bounds.height) * Math.min(page.settings.y, 0.95), - left: (bounds.width) * Math.min(page.settings.x, 0.95), + } + 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 url = '/' + graph.path + '/' + page.path - // console.log(style) - return ( - <div - className='handle' - onMouseDown={onMouseDown} - onDoubleClick={() => history.push(url)} - style={style} - > - {page.title} - <Link to={url}>{'>'}</Link> - </div> - ) } const mapStateToProps = state => ({ |