diff --git a/package.json b/package.json index 49f5078..b8b2830 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react-dom": "^16.13.0", "react-mathjax": "^1.0.1", "react-scripts": "3.4.0", + "react-sizeme": "^2.6.12", "react-svg": "^11.0.18" }, "scripts": { diff --git a/src/App.js b/src/App.js index 7ecf2d8..3cc54f2 100644 --- a/src/App.js +++ b/src/App.js @@ -12,22 +12,22 @@ class App extends React.Component { this.openCanvas = this.openCanvas.bind(this); this.saveProof = this.saveProof.bind(this); this.introWindow = React.createRef(); - this.state = { - initialCSS: 'initial', - canvasOpen: false, - popupOpen: false, - proof: { - premises: [], - conclusion: '', - steps: [] - } - }; // this.state = { // initialCSS: 'initial', - // canvasOpen: true, + // canvasOpen: false, // popupOpen: false, - // proof: {premises: ["(({Q}))(({P}){Q})"], conclusion: "{Q}", steps:[] } + // proof: { + // premises: [], + // conclusion: '', + // steps: [] + // } // }; + this.state = { + initialCSS: 'initial', + canvasOpen: true, + popupOpen: false, + proof: {premises: ["(({Q}))(({P}){Q})"], conclusion: "{Q}", steps:[] } + }; } saveProof(proof) { diff --git a/src/canvas/EGCut.js b/src/canvas/EGCut.js index 487fab5..6beeba5 100644 --- a/src/canvas/EGCut.js +++ b/src/canvas/EGCut.js @@ -23,10 +23,6 @@ class EGCut extends React.Component { } } - componentWillUnmount() { - window.removeEventListener('click', this.handleClick); - } - getBBoxData() { if (this.cut.current) { let { x, y, width, height } = this.cut.current.getBBox(); @@ -40,33 +36,28 @@ class EGCut extends React.Component { } componentDidMount() { - this.setState(this.getBBoxData()); + this.interval = setInterval(() => this.setState(this.getBBoxData()), 1); } - componentDidUpdate() { - let bb = this.BB.current; - let b = this.getBBoxData(); - bb.setAttribute('x', b._x); - bb.setAttribute('y', b._y); - bb.setAttribute('width', b._w); - bb.setAttribute('height', b._h); + componentWillUnmount() { + window.removeEventListener('click', this.handleClick); + clearInterval(this.interval); } render() { - let b = this.getBBoxData(); let childEl = this.props.children; if (childEl.length < 1) { childEl = {" "} } let highlight = this.state.highlight && this.props.enableHighlight; + let { _x, _y, _w, _h } = this.state; return ( Date: Mon, 27 Apr 2020 19:38:01 -0400 Subject: [PATCH 2/4] cleaned up a little --- src/canvas/Canvas.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js index 1b8b204..515f0be 100644 --- a/src/canvas/Canvas.js +++ b/src/canvas/Canvas.js @@ -223,7 +223,6 @@ class Canvas extends React.Component { else return false; } else return false; - return true; } /* Given a step and the ID of a cut, will iterate through all cuts within -- 2.51.2 From 2ea37ae4dd33af5726ed413e040d83d7e806fb69 Mon Sep 17 00:00:00 2001 From: Chris Vanderloo Date: Mon, 27 Apr 2020 19:47:08 -0400 Subject: [PATCH 3/4] tidied up stepmenu --- src/canvas/StepMenu.js | 79 ++++++------------------------------------ 1 file changed, 10 insertions(+), 69 deletions(-) diff --git a/src/canvas/StepMenu.js b/src/canvas/StepMenu.js index 1b2aab8..a242681 100644 --- a/src/canvas/StepMenu.js +++ b/src/canvas/StepMenu.js @@ -5,97 +5,38 @@ import { ReactSVG } from 'react-svg'; // Call this.props.setStep(step) to change class StepMenu extends React.Component { - constructor(props) { - super(props); - this.state = { - backColor:"rgb(165, 165, 165)", - nextColor:"rgb(165, 165, 165)" - }; - } - - /* Updates the colors in the state given a step number. - * Does not reference props so that the color can be updated - * before the props changes and the component is rerendered - */ - updateColor(step) { - // changes the color of the prev or next buttons to be grayed out - // if the current step is the first or last step - let backColor, nextColor - if (step === 0){ - backColor = "rgb(136, 136, 136)"; - } - else { - backColor = "rgb(68, 68, 68)"; - } - if (step === (this.props.stepInfo.length - 1) || this.props.stepInfo.length === 0) { - nextColor = "rgb(136, 136, 136)"; - } - else { - nextColor = "rgb(68, 68, 68)"; - } - - this.setState({ backColor: backColor, nextColor: nextColor }); - } - - componentDidMount() { - this.updateColor(this.props.currentStep) - } - - /* Handles clicking of the SVG components - * event is the click itself, clicktype tells which - * SVG button was clicked with a string - */ - handleClick(event, clickType) { + handleClick(event, step) { event.preventDefault(); - let step = this.props.currentStep; - switch(clickType) { - case "first": - step = 0; - break; - case "prev": - if (this.props.currentStep != 0) - step--; - break; - case "next": - if (this.props.currentStep != this.props.stepInfo.length - 1) - step++; - break; - case "last": - step = this.props.stepInfo.length - 1; - break; - default: - break; - } // Must update color before updating props to allow component to // render with the proper current color rather than the state before - this.updateColor(step); this.props.setStep(step); } render() { - if (this.props.hide) return (); + let { hide, currentStep, stepInfo } = this.props; + if (hide) return (); return (
-
-
this.handleClick(event, "first")}> +
+
this.handleClick(event, 0)}>
-
this.handleClick(event, "prev")}> +
this.handleClick(event, currentStep - 1)}>
-
-
this.handleClick(event, "next")}> +
+
this.handleClick(event, currentStep + 1)}>
-
this.handleClick(event, "last")}> +
this.handleClick(event, stepInfo.length - 1)}>
- Step {this.props.currentStep + 1} of {this.props.stepInfo.length} + Step {currentStep + 1} of {stepInfo.length}
); -- 2.51.2 From 049ed323a21ecf1be74adbd63526d81a808fac47 Mon Sep 17 00:00:00 2001 From: Chris Vanderloo Date: Mon, 27 Apr 2020 19:51:04 -0400 Subject: [PATCH 4/4] tidier --- src/canvas/StepMenu.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/canvas/StepMenu.js b/src/canvas/StepMenu.js index a242681..7349273 100644 --- a/src/canvas/StepMenu.js +++ b/src/canvas/StepMenu.js @@ -1,9 +1,6 @@ import React from 'react'; import { ReactSVG } from 'react-svg'; -// TODO: -// Call this.props.setStep(step) to change - class StepMenu extends React.Component { handleClick(event, step) { event.preventDefault();