diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js index 6f43531..74b3b8b 100644 --- a/src/canvas/Canvas.js +++ b/src/canvas/Canvas.js @@ -93,6 +93,7 @@ class Canvas extends React.Component { dcRemove: (id) => { console.log("DOUBLE CUT Remove") let successful = this.doubleCutRemove(id); + console.log(successful); if (successful) this.setState({ highlights: { @@ -135,7 +136,15 @@ class Canvas extends React.Component { * Will only run if the current step is the last step. */ doubleCutAdd(ID) { - + 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); + console.log(inside); + // create a new cut + //let cut = } /* Removes a double cut given the ID of the outside cut. @@ -157,6 +166,7 @@ class Canvas extends React.Component { if (secondCut && secondCut.length === 1 && secondCut[0].type === "cut") { // Get the data inside the second cut let newContents = secondCut[0].data; + console.log(firstCut) // Remove the first cut from the data array const index = step.data.indexOf(firstCut); if (index > -1) { @@ -168,6 +178,7 @@ class Canvas extends React.Component { currentStep+=1; steps.push(step); this.setState({ steps: steps, currentStep: currentStep, data:data }); + return true; } else return false; } -- 2.51.2 From 969ddfbf8a252026dcf02696e5e4381129de3c84 Mon Sep 17 00:00:00 2001 From: rsdexter Date: Sun, 26 Apr 2020 22:58:07 -0400 Subject: [PATCH 2/5] DCAdd adds two cuts to the selection properly and adds it to the data array in the next step --- src/canvas/Canvas.js | 52 +++++++++++++++++++++++++++++++++++++++----- 1 file changed, 47 insertions(+), 5 deletions(-) diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js index 74b3b8b..2a9a495 100644 --- a/src/canvas/Canvas.js +++ b/src/canvas/Canvas.js @@ -93,7 +93,6 @@ class Canvas extends React.Component { dcRemove: (id) => { console.log("DOUBLE CUT Remove") let successful = this.doubleCutRemove(id); - console.log(successful); if (successful) this.setState({ highlights: { @@ -142,9 +141,38 @@ class Canvas extends React.Component { // 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); - console.log(inside); - // create a new cut - //let cut = + // 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 }; + data[cut1_id] = { type: "cut", level: level + 1 }; + // increase the level of the inside cut along with all cuts inside of it by 2 + this.changeCutLevel(step, ID, 2) + + // Add the contents of the new cuts to the data array + // after removing the original contents + const index = step.data.indexOf(inside); + if (index > -1) { + step.data.splice(index, 1); + } + step.data = step.data.concat(cut1); + // Change the state data accordingly + currentStep+=1; + steps.push(step); + this.setState({ steps: steps, currentStep: currentStep, data:data }); + return true; } /* Removes a double cut given the ID of the outside cut. @@ -166,7 +194,6 @@ class Canvas extends React.Component { if (secondCut && secondCut.length === 1 && secondCut[0].type === "cut") { // Get the data inside the second cut let newContents = secondCut[0].data; - console.log(firstCut) // Remove the first cut from the data array const index = step.data.indexOf(firstCut); if (index > -1) { @@ -186,6 +213,20 @@ class Canvas extends React.Component { return true; } + // Given a step and the ID of a cut, will iterate through all cuts within + /* that cut and change their level by a specified amount. + /* Change defaults at 2 for the DoubleCut addition + */ + changeCutLevel(step, ID, change = 2) { + console.log("here to change cut levels") + function changeLevelMap(map) { + + } + function changeLevelArray(arr) { + + } + } + // Performs a deep copy of oldStep into newStep, used to not change previous steps // By allowing them to be copied without using a reference copyStep(oldStep) { @@ -280,6 +321,7 @@ class Canvas extends React.Component { } renderStep(stepIndex) { + console.log(this.state) let { data } = this.state; let step = this.state.steps[stepIndex] if (step) { -- 2.51.2 From ec0543a837ca0f9b8876f56fa10e3163d1d57679 Mon Sep 17 00:00:00 2001 From: rsdexter Date: Sun, 26 Apr 2020 23:22:54 -0400 Subject: [PATCH 3/5] changeCutLevel function inc/decreases the levels of a cut and all cuts inside it --- src/canvas/Canvas.js | 38 +++++++++++++++++++++++++++++++++++--- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js index 2a9a495..e3e25db 100644 --- a/src/canvas/Canvas.js +++ b/src/canvas/Canvas.js @@ -217,14 +217,46 @@ class Canvas extends React.Component { /* that cut and change their level by a specified amount. /* Change defaults at 2 for the DoubleCut addition */ - changeCutLevel(step, ID, change = 2) { + changeCutLevel(step, id, change = 2) { + let { data } = this.state console.log("here to change cut levels") + // when true, the levels should change in the functions below + let idFound = false + // Changes the function changeLevelMap(map) { - + // get the id for the current map + let mapID; + if (map.id) { + mapID = map.id + // if it matches the id being searched, update the boolean + if (mapID === id) { + console.log("ID FOUND IN ChangeLevel", mapID, id); + idFound = true; + } + } + // If the ID has been found, update the level of the current cut + if (idFound) { + console.log("LOGDATA",data[mapID]); + data[mapID].level += change; + } + // call the function of the data array if it exists + if (map.data){ + console.log("C-Array") + changeLevelArray(map.data); + } } function changeLevelArray(arr) { - + for (let a in arr) { + // If a non-string is found (a cut) + if (typeof arr[a] !== 'string') { + // Change the level of the cut + console.log("C-Map") + changeLevelMap(arr[a]) + } + } } + changeLevelArray(step.data) + this.setState({ data: data }) } // Performs a deep copy of oldStep into newStep, used to not change previous steps -- 2.51.2 From 1c286c0d4d6fc7b80ef40b5909e9423a8b7788fa Mon Sep 17 00:00:00 2001 From: rsdexter Date: Mon, 27 Apr 2020 00:01:29 -0400 Subject: [PATCH 4/5] AddDC now functions properly when done inside another cut, adding the child to the corrent place --- src/canvas/Canvas.js | 72 ++++++++++++++++++++++++++++++++++++-------- 1 file changed, 60 insertions(+), 12 deletions(-) diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js index e3e25db..8f77c7f 100644 --- a/src/canvas/Canvas.js +++ b/src/canvas/Canvas.js @@ -141,6 +141,9 @@ class Canvas extends React.Component { // 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 false; + } // create a new cut with another one inside it let cut1_id = nanoid(); let cut2_id = nanoid(); @@ -161,13 +164,19 @@ class Canvas extends React.Component { // 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 false; + } + console.log("PARENT: ", parent) // Add the contents of the new cuts to the data array // after removing the original contents - const index = step.data.indexOf(inside); + const index = parent.data.indexOf(inside); if (index > -1) { - step.data.splice(index, 1); + parent.data.splice(index, 1); } - step.data = step.data.concat(cut1); + parent.data = parent.data.concat(cut1); // Change the state data accordingly currentStep+=1; steps.push(step); @@ -213,13 +222,11 @@ class Canvas extends React.Component { return true; } - // Given a step and the ID of a cut, will iterate through all cuts within - /* that cut and change their level by a specified amount. - /* Change defaults at 2 for the DoubleCut addition + /* Given a step and the ID of a cut, will iterate through all cuts within + * that cut and change their level by a specified amount. */ - changeCutLevel(step, id, change = 2) { + changeCutLevel(step, id, change) { let { data } = this.state - console.log("here to change cut levels") // when true, the levels should change in the functions below let idFound = false // Changes the @@ -230,18 +237,15 @@ class Canvas extends React.Component { mapID = map.id // if it matches the id being searched, update the boolean if (mapID === id) { - console.log("ID FOUND IN ChangeLevel", mapID, id); idFound = true; } } // If the ID has been found, update the level of the current cut if (idFound) { - console.log("LOGDATA",data[mapID]); data[mapID].level += change; } // call the function of the data array if it exists if (map.data){ - console.log("C-Array") changeLevelArray(map.data); } } @@ -250,7 +254,6 @@ class Canvas extends React.Component { // If a non-string is found (a cut) if (typeof arr[a] !== 'string') { // Change the level of the cut - console.log("C-Map") changeLevelMap(arr[a]) } } @@ -298,6 +301,51 @@ class Canvas extends React.Component { return newStep; } + /* Finds and returns the item that is the parent of the item + * with the specified ID, given the step to search as well. + */ + findParent(searchedStep, id) { + // holds the parent of the id + let parent = searchedStep + // Searches an array for the ID, returns true if it is found + function findInArray(arr) { + for (let a in arr) { + // If an ID is found, compare it + if (typeof arr[a] === 'string') { + if (arr[a] === id) { + console.log("FOUND IDvar", arr[a]); + return true; + } + } + // Otherwise if a datamap is found, check the ID + else { + // If ID matches, return true + if (arr[a].id && arr[a].id === id) { + console.log("FOUND IDcut", arr[a].id); + return true; + } + // Otherwise, search the datamap + else { + findInMap(arr[a]) + } + } + } + return false; + } + function findInMap(map) { + // if the map contains data, search the data + if (map.data) { + // if found, set parent to this map + if(findInArray(map.data)) { + console.log("FOUND PARENT", map); + parent = map; + } + } + } + findInArray(searchedStep.data); + return parent; + } + // finds and returns the item with the specified ID in a given step findID(searchedStep, id) { // Find the ID in an array -- 2.51.2 From b4150ed8b25ecb0999df990007e243a89aed2889 Mon Sep 17 00:00:00 2001 From: rsdexter Date: Mon, 27 Apr 2020 00:04:52 -0400 Subject: [PATCH 5/5] DCRemove now also works when selection is within another cut, adding the children to the correct cut instead of the top of the step --- src/canvas/Canvas.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js index 8f77c7f..1b8b204 100644 --- a/src/canvas/Canvas.js +++ b/src/canvas/Canvas.js @@ -169,7 +169,6 @@ class Canvas extends React.Component { if (!parent) { return false; } - console.log("PARENT: ", parent) // Add the contents of the new cuts to the data array // after removing the original contents const index = parent.data.indexOf(inside); @@ -203,13 +202,18 @@ class Canvas extends React.Component { if (secondCut && secondCut.length === 1 && secondCut[0].type === "cut") { // Get the data inside the second cut let newContents = secondCut[0].data; + // Get the parent of the original cut being removed + let parent = this.findParent(step, cutID) + if (!parent) { + return false; + } // Remove the first cut from the data array - const index = step.data.indexOf(firstCut); + const index = parent.data.indexOf(firstCut); if (index > -1) { - step.data.splice(index, 1); + parent.data.splice(index, 1); } // Add the contents of the second cut to the data array - step.data = step.data.concat(newContents); + parent.data = parent.data.concat(newContents); // Update the state currentStep+=1; steps.push(step); @@ -313,7 +317,6 @@ class Canvas extends React.Component { // If an ID is found, compare it if (typeof arr[a] === 'string') { if (arr[a] === id) { - console.log("FOUND IDvar", arr[a]); return true; } } @@ -321,7 +324,6 @@ class Canvas extends React.Component { else { // If ID matches, return true if (arr[a].id && arr[a].id === id) { - console.log("FOUND IDcut", arr[a].id); return true; } // Otherwise, search the datamap @@ -337,7 +339,6 @@ class Canvas extends React.Component { if (map.data) { // if found, set parent to this map if(findInArray(map.data)) { - console.log("FOUND PARENT", map); parent = map; } } @@ -401,7 +402,6 @@ class Canvas extends React.Component { } renderStep(stepIndex) { - console.log(this.state) let { data } = this.state; let step = this.state.steps[stepIndex] if (step) {