From 2689203391f5dbd6c9fc8319ec99c178f4436515 Mon Sep 17 00:00:00 2001
From: Chris Vanderloo <chris.vanderloo@yahoo.com>
Date: Sat, 26 Sep 2020 23:00:51 -0400
Subject: [PATCH] fixed toggling off selection state

---
 src/canvas/Canvas.js     | 74 ++++++++++++++++++++++++++--------------
 src/canvas/Toolbox.js    | 36 ++++++++++---------
 src/canvas/manipulate.js | 55 ++++++++++++++++++++++++++++-
 3 files changed, 121 insertions(+), 44 deletions(-)

diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js
index 3bd0126..1520615 100644
--- a/src/canvas/Canvas.js
+++ b/src/canvas/Canvas.js
@@ -33,7 +33,6 @@ function initXY(step, level) {
   // in between two variables, so that we can evenly place 
   // them initially across the screen
   function initXYRecurse(step, level, gapSize) {
-    console.log(data)
     for (let s in step) {
       if (step[s] instanceof Array && step[s].length > 0) {
         let id = nanoid()
@@ -72,11 +71,12 @@ class Canvas extends React.Component {
     this.getSVGCoords = this.getSVGCoords.bind(this);
     this.highlightCut = this.highlightCut.bind(this);
     this.modifyCanvas = this.modifyCanvas.bind(this);
+    this.cancelSelection = this.cancelSelection.bind(this);
+    this.createElement = this.createElement.bind(this);
 
     this.getSelection = this.getSelection.bind(this);
 
     let { premises, conclusion, steps, data } = this.props.proof;
-    console.log(steps.length - 1)
     this.state = {
       proof: {
         premises: premises,
@@ -100,7 +100,8 @@ class Canvas extends React.Component {
         erasure: () => manipulate(this).erasure(),
         iteration: () => manipulate(this).iteration(),
         doubleCutRemove: () => manipulate(this).doubleCutRemove(),
-        doubleCutAdd: () => manipulate(this).doubleCutAdd()
+        doubleCutEnclose: () => manipulate(this).doubleCutEnclose(),
+        doubleCutAdd: () => manipulate(this).doubleCutAdd(),
       }
     }
   }
@@ -124,13 +125,15 @@ class Canvas extends React.Component {
         highlights: selectConfig, 
         interaction: false, 
         cbFunction: (id) => {
-          if (this.state.finishCB) 
+          if (this.state.finishCB) {
             this.state.finishCB();
+          }
           this.setState({  
             highlights: {
               cut: 'none', 
               var: 'none'
             },
+            finishCB: null,
             interaction: true, 
             cbFunction: null });
           resolve(id);
@@ -145,24 +148,24 @@ class Canvas extends React.Component {
     changeHistory = changeHistory.slice()
     changeHistory.push({ steps: Array.from(steps) });
     // okay, now we call the requested function from Toolbox
-    // 
-    // cancel any previous actions
-    if (this.state.cbFunction) {
-      this.state.cbFunction(null);
-    }
     this.setState({ finishCB: finishedCb }, () => {
       this.state.functions[nameOfFunction]().then(state => {
-      if (state) {
-        // now we can apply the new changeHistory
-        this.setState({ 
-          changeHistory: changeHistory, 
-          redoHistory: [],
-          ...state });
-      }
+        if (state) {
+          // now we can apply the new changeHistory
+          this.setState({ 
+            changeHistory: changeHistory, 
+            redoHistory: [],
+            ...state });
+        }
       });
     });
   }
 
+  cancelSelection() {
+    let { cbFunction } = this.state;
+    if (cbFunction) cbFunction();
+  }
+
   changePos(id, x, y) {
     let { data } = this.state;
     Object.assign(data[id], { x: x, y: y })
@@ -187,6 +190,24 @@ class Canvas extends React.Component {
     return false;
   }
 
+  createElement(text, type, currentStep, x, y) {
+    let { data } = this.state;
+    let id = nanoid();
+    data[id] = {};
+    data[id].x = x || 0;
+    data[id].y = y || 0;
+    data[id].type = type;
+    data[id].var = text;
+    console.log(text,type,currentStep)
+    currentStep.push(id);
+    this.setState({ data });
+  }
+
+  removeElement(id) {
+    let { data, steps } = this.state;
+    steps[this.state.currentStep].push(id);
+  }
+
   renderStep(stepIndex) {
     let { data } = this.state;
     let step = this.state.steps[stepIndex]
@@ -200,13 +221,7 @@ class Canvas extends React.Component {
       const renderRecurse = (step) => {
         let jsx = [];
         if (step.length === 0) {
-          let id = nanoid();
-          data[id] = {};
-          setXY(id, 0, 0);
-          data[id].type = "emptyvar";
-          data[id].var = "\xa0";
-          step.push(id);
-          this.setState({ data: data });
+          this.createElement("\xa0", "emptyvar", step, 0, 0);
         }
         for (let s in step) {
           if (step[s].type === "cut") {
@@ -216,6 +231,7 @@ class Canvas extends React.Component {
                 level={level} 
                 enableHighlight={this.highlightCut(level)}
                 id={step[s].id}
+                key={step[s].id}
                 selectedCallback={this.state.cbFunction}>
                 {renderRecurse(step[s].data)}
               </EGCut>
@@ -239,7 +255,7 @@ class Canvas extends React.Component {
                 {el.var}
               </EGVariable>
             );
-          } else if (this.state.data[step[s]].type === "emptyvar") {
+          } else if (this.state.data[step[s]].type === "emptyvar" && step.length === 1) {
             let el = this.state.data[step[s]];
             jsx.unshift(
               <EGVariable 
@@ -307,7 +323,7 @@ class Canvas extends React.Component {
   }
 
   render() {
-    let { proof, data, steps, currentStep } = this.state; 
+    let { proof, data, steps, currentStep } = this.state;
     // every time a re-render happens, ensure top-level state is up-to-date
     this.props.saveProof({...proof, data, steps});
     // zooming function does nothing unless panzoom is initialized
@@ -329,6 +345,7 @@ class Canvas extends React.Component {
             hidden={currentStep+1 !== steps.length}
             functions={this.state.functions}
             modifyCanvas={this.modifyCanvas}
+            cancelSelection={this.cancelSelection}
           />
           <svg 
             ref={this.canvasContainer}
@@ -344,7 +361,12 @@ class Canvas extends React.Component {
             setStep={s => this.setState({ currentStep: s, interaction: s === this.state.steps.length - 1 })}
             state={this.state}
             setState={(changeHistory, newSteps, redoHistory) => {
-              this.setState({ changeHistory: changeHistory, steps: newSteps, redoHistory: redoHistory, currentStep: newSteps.length - 1 });
+              this.setState({ 
+                changeHistory: changeHistory, 
+                steps: newSteps, 
+                redoHistory: redoHistory, 
+                currentStep: newSteps.length - 1 
+              });
             }}
           />
         </div>
diff --git a/src/canvas/Toolbox.js b/src/canvas/Toolbox.js
index 917d45e..e7eae1b 100644
--- a/src/canvas/Toolbox.js
+++ b/src/canvas/Toolbox.js
@@ -4,31 +4,31 @@ class Toolbox extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      selected: null,
       functions: [
         {
           str: "Iterate",
           func: 'iteration',
-          highlight: false
         },
         {
-          str: "Remove Double Cut",
-          func: 'doubleCutRemove',
-          highlight: false
+          str: "Wrap in Double Cut",
+          func: 'doubleCutEnclose',
         },
         {
           str: "Add Double Cut",
           func: 'doubleCutAdd',
-          highlight: false
+        },
+        {
+          str: "Remove Double Cut",
+          func: 'doubleCutRemove',
         },
         {
           str: "Insertion",
           func: 'insertion',
-          highlight: false
         },
         {
           str: "Erasure",
           func: 'erasure',
-          highlight: false
         }
       ]
     };
@@ -38,7 +38,8 @@ class Toolbox extends React.Component {
   }
 
   render() {
-    let { hidden, modifyCanvas } = this.props;
+    let { hidden, modifyCanvas, cancelSelection } = this.props;
+    let { selected } = this.state;
     if (hidden) return <React.Fragment />;
     return (
       <div className="toolbox" ref={this.canvas}>
@@ -46,16 +47,17 @@ class Toolbox extends React.Component {
         {this.state.functions.map((el, i) => (
           <div 
             className="tool"
-            style={el.highlight ? { backgroundColor: '#AFAFAA' } : {}} 
+            style={selected === i ? { backgroundColor: '#AFAFAA' } : {}} 
             onClick={() => {
-              let new_func = this.state.functions;
-              new_func[i].highlight = true;
-              modifyCanvas(el.func, () => {
-                let new_func = this.state.functions;
-                new_func[i].highlight = false;
-                this.setState({ functions: new_func });
-              });
-              this.setState({ functions: new_func });
+              if (this.state.selected === i) {
+                cancelSelection();
+              }
+              else {
+                this.setState({ selected: i });
+                modifyCanvas(el.func, () => {
+                  this.setState({ selected: null });
+                });
+              }
             }
           }
           >{el.str}</div>
diff --git a/src/canvas/manipulate.js b/src/canvas/manipulate.js
index c0a746e..261edd6 100644
--- a/src/canvas/manipulate.js
+++ b/src/canvas/manipulate.js
@@ -38,7 +38,7 @@ module.exports = ({ state, getSelection }) => {
         return null;
       }
       let insert = this.findID(step, insertID);
-      if (!insert) {
+      if (!insert.data) {
         console.log("Insert ID could not be found in Iterate");
         return null;
       }
@@ -56,6 +56,7 @@ module.exports = ({ state, getSelection }) => {
 
     erasure: async function () {
       let id = await getSelection({ 'cut': 'even', 'var': 'even' });
+      if (id==null) return this.state;
       let { steps, currentStep, data } = this.state;
       // Create a new step
       let step = this.copyStep(steps[currentStep]);
@@ -82,6 +83,58 @@ module.exports = ({ state, getSelection }) => {
       return { steps: steps, currentStep: currentStep, data: data };
     },
 
+    /* Adds a double cut given the ID of the data that will be inside the cut.
+    *  Will only run if the current step is the last step.
+    */
+    doubleCutEnclose: async function () {
+      var id = await getSelection({ 'cut': 'all', 'var': 'all' });
+      let { steps, currentStep, data } = this.state;
+      // create a new step
+      let step = this.copyStep(steps[currentStep]);
+      // use findID to find the data represented by the id
+      // this is the data that will be inside the two new cuts
+      let inside = this.findID(step, id);
+      if (!inside) {
+        return null;
+      }
+      // create a new cut with another one inside it
+      let cut1_id = nanoid();
+      let cut2_id = nanoid();
+      let cut2 = {
+        data: [inside],
+        id: cut2_id,
+        type: "cut"
+      }
+      let cut1 = {
+        data: [cut2],
+        id: cut1_id,
+        type: "cut"
+      }
+      // Set the levels of the two cuts
+      let level = data[id].level
+      data[cut2_id] = { type: "cut", level: level + 1};
+      data[cut1_id] = { type: "cut", level: level};
+      // increase the level of the inside cut along with all cuts inside of it by 2
+      this.changeCutLevel(step, id, 2)
+
+      // get the parent of the selection
+      let parent = this.findParent(step, id)
+      if (!parent) {
+        return null;
+      }
+      // Add the contents of the new cuts to the data array
+      // after removing the original contents
+      const index = parent.data.indexOf(inside);
+      if (index > -1) {
+        parent.data.splice(index, 1);
+      }
+      parent.data = parent.data.concat(cut1);
+      // Change the state data accordingly
+      currentStep+=1;
+      steps.push(step);
+      return { steps: steps, currentStep: currentStep, data:data };
+    },
+
     /* Adds a double cut given the ID of the data that will be inside the cut.
     *  Will only run if the current step is the last step.
     */
-- 
2.51.2