From a9fa64278f7a3b743bd1fb8684eef2d9b7a0b74d Mon Sep 17 00:00:00 2001 From: Chris Vanderloo Date: Tue, 27 Oct 2020 19:31:54 -0400 Subject: [PATCH] can move graphs by clicking and dragging (little laggy) --- src/canvas/Canvas.js | 24 +++++++++++++++++++--- src/canvas/EGCut.js | 44 ++++++++++++++++++++++++++++++++++------ src/canvas/EGVariable.js | 8 +++++++- 3 files changed, 66 insertions(+), 10 deletions(-) diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js index dd76c4b..a526380 100644 --- a/src/canvas/Canvas.js +++ b/src/canvas/Canvas.js @@ -79,6 +79,7 @@ class Canvas extends React.Component { this.clickedCanvas = this.clickedCanvas.bind(this); this.initXY = initXY; + this.moveVars = {}; this.getSelection = this.getSelection.bind(this); let { premises, conclusion, steps, data } = this.props.proof; @@ -289,12 +290,12 @@ class Canvas extends React.Component { renderStep(stepIndex) { let { data } = this.state; - let step = this.state.steps[stepIndex] + let step = this.state.steps[stepIndex]; if (step) { const setXY = (id,x,y) => { data[id].x = x; data[id].y = y; - this.setState({ data: data }) + this.setState({ data: data }); } const renderRecurse = (step) => { @@ -305,11 +306,26 @@ class Canvas extends React.Component { for (let s in step) { if (step[s].type === "cut") { let level = data[step[s].id].level; + const ids = []; + const getIds = (step) => { + if (step.data) + for (let i in step.data) + getIds(step.data[i]); + else ids.push(step); + } + getIds(step[s]) let groupElement = ( { + ids.forEach(id => { + this.moveVars[id](x,y); + }); + }} key={step[s].id} selectedCallback={this.state.cbFunction}> {renderRecurse(step[s].data)} @@ -330,6 +346,7 @@ class Canvas extends React.Component { interaction={this.state.interaction || this.highlightVar(level)} getCoords={this.getSVGCoords} setCoords={(x,y) => setXY(step[s],x,y)} + subscribeMove={f => this.moveVars[step[s]] = f} key={step[s]}> {el.var} @@ -347,6 +364,7 @@ class Canvas extends React.Component { interaction={this.state.interaction} getCoords={this.getSVGCoords} setCoords={(x,y) => setXY(step[s],x,y)} + subscribeMove={f => this.moveVars[step[s]] = f} key={step[s]}> {el.var} @@ -356,7 +374,7 @@ class Canvas extends React.Component { return jsx; } renderRecurse.bind(this); - return renderRecurse(step.data) + return renderRecurse(step.data, (f)=>{}) } } diff --git a/src/canvas/EGCut.js b/src/canvas/EGCut.js index 5f7be14..43a374d 100644 --- a/src/canvas/EGCut.js +++ b/src/canvas/EGCut.js @@ -9,21 +9,28 @@ class EGCut extends React.Component { this.getBBoxData = this.getBBoxData.bind(this); this.handleClick = this.handleClick.bind(this); this.update = this.update.bind(this); + this.getCoords = this.props.getCoords this.state = { highlight: false, + cursorOver: false, bounding: {_x:0,_y:0,_w:0,_h:0} }; + this.panzoom = this.props.panzoom + window.addEventListener('click', this.handleClick) + window.addEventListener('mousemove', this.onMouseMove.bind(this)) + window.addEventListener('mousedown', this.handleDragStart.bind(this)) + window.addEventListener('mouseup', this.handleDragEnd.bind(this)) } handleClick() { - if (this.state.highlight + if (this.state.cursorOver && this.props.enableHighlight && this.props.selectedCallback) { this.props.selectedCallback(this.props.id); - this.setState({ highlight: false }); + this.setState({ cursorOver: false }); } } @@ -65,9 +72,34 @@ class EGCut extends React.Component { clearInterval(this.interval); } + handleDragStart(evt) { + if (this.state.cursorOver) { + this.panzoom.pause(); + let { x, y } = this.getCoords(evt.clientX, evt.clientY); + this.setState({ dragging: true, x, y }) + } + } + + handleDragEnd(evt) { + this.panzoom.resume(); + this.setState({ dragging: false }); + } + + onMouseMove(evt) { + if (this.state.dragging) { + let x_orig = this.state.x; + let y_orig = this.state.y; + let { x, y } = this.getCoords(evt.clientX, evt.clientY) + x = Math.round(x/config.gridSize)*config.gridSize + y = Math.round(y/config.gridSize)*config.gridSize + this.props.setCoords(x-x_orig, y-y_orig); + this.setState({ x: x, y: y }); + } + } + render() { - let highlight = this.state.highlight && this.props.enableHighlight; - let reject = this.props.selectedCallback != null && this.state.highlight && !this.props.enableHighlight; + let highlight = this.state.cursorOver && this.props.enableHighlight; + let reject = this.props.selectedCallback != null && this.state.cursorOver && !this.props.enableHighlight; let stroke = "black"; if (highlight) stroke = "blue"; else if (reject) stroke = "red"; @@ -83,8 +115,8 @@ class EGCut extends React.Component { strokeOpacity="1" stroke={stroke} fill={highlight ? "#DFDFDA" : "white"} - onMouseEnter={(e) => this.setState({ highlight: true })} - onMouseLeave={(e) => this.setState({ highlight: false })} + onMouseEnter={(e) => this.setState({ cursorOver: true })} + onMouseLeave={(e) => this.setState({ cursorOver: false })} rx={config.cutCornerRadius.toString()} ry={config.cutCornerRadius.toString()} /> diff --git a/src/canvas/EGVariable.js b/src/canvas/EGVariable.js index d51477b..5373c16 100644 --- a/src/canvas/EGVariable.js +++ b/src/canvas/EGVariable.js @@ -34,6 +34,12 @@ class EGVariable extends React.Component { componentDidMount() { this.text.current.style.cursor = "pointer"; + this.props.subscribeMove((x,y) => { + let newx = this.state.x + x; + let newy = this.state.y + y; + this.props.setCoords(newx, newy); + this.setState({ x: newx, y: newy }); + }) } handleDragStart(evt) { @@ -56,7 +62,7 @@ class EGVariable extends React.Component { x = Math.round(x/config.gridSize)*config.gridSize y = Math.round(y/config.gridSize)*config.gridSize this.props.setCoords(x, y); - this.setState({ x: x, y: y }) + this.setState({ x: x, y: y }); } } -- 2.51.2