From 6a8ddfaf29354eccd2e4369b6a990cc81eeb0f18 Mon Sep 17 00:00:00 2001 From: William Zhu Date: Mon, 28 Jun 2021 10:36:09 -0400 Subject: [PATCH 01/10] feat: fixed issue where typing out clip-path that spaces after commas matter --- components/core/CreateShape.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/components/core/CreateShape.js b/components/core/CreateShape.js index 68f8e56..901af80 100644 --- a/components/core/CreateShape.js +++ b/components/core/CreateShape.js @@ -247,13 +247,13 @@ const CreateShape = (props) => { if (clipPathType === "polygon") { let formulaNumbers = formula.slice(formula.indexOf("(") + 1, formula.indexOf(")")); - formulaNumbers = formulaNumbers.split(", "); + formulaNumbers = formulaNumbers.split(","); newVerticeCoordinates = formulaNumbers.map(x => { - let percentageArray = x.split(" "); - return { - "x": percentageArray[0], - "y": percentageArray[1], - } + let percentageArray = x.trim().split(" "); + return { + "x": percentageArray[0], + "y": percentageArray[1], + } }); } From 4b68e845c63e93a59a1e861f28ecd46d5b9dc619 Mon Sep 17 00:00:00 2001 From: William Zhu Date: Mon, 28 Jun 2021 10:50:42 -0400 Subject: [PATCH 02/10] feat: fixed issue where copy and pasting clip-path without spaces does not render the DraggableVertices --- components/core/CreateShape.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/core/CreateShape.js b/components/core/CreateShape.js index 901af80..f77acb3 100644 --- a/components/core/CreateShape.js +++ b/components/core/CreateShape.js @@ -261,7 +261,7 @@ const CreateShape = (props) => { return { ...prevState, "formula": formula.includes("(") && formula.includes(")") ? formula : prevState.formula, - "clipPathType": clipPathType === null ? prevState.clipPathType : clipPathType, + "clipPathType": clipPathType === undefined ? prevState.clipPathType : clipPathType, "vertices": edgeVerticeNumber, "edges": edgeVerticeNumber, "verticeCoordinates": newVerticeCoordinates, From 25719710d4a38dbfb7d9e6e1cba93aeed6610ba2 Mon Sep 17 00:00:00 2001 From: William Zhu Date: Mon, 28 Jun 2021 11:02:52 -0400 Subject: [PATCH 03/10] feat: CreateShape can now read clip-path formulas without spaces inbetween the percentages --- components/core/CreateShape.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/components/core/CreateShape.js b/components/core/CreateShape.js index f77acb3..0401834 100644 --- a/components/core/CreateShape.js +++ b/components/core/CreateShape.js @@ -249,10 +249,13 @@ const CreateShape = (props) => { let formulaNumbers = formula.slice(formula.indexOf("(") + 1, formula.indexOf(")")); formulaNumbers = formulaNumbers.split(","); newVerticeCoordinates = formulaNumbers.map(x => { - let percentageArray = x.trim().split(" "); + let values = x.trim(); + let xValue = values.substring(0, values.indexOf("%") + 1).trim(); + let yValue = values.substring(values.indexOf("%") + 1).trim(); + return { - "x": percentageArray[0], - "y": percentageArray[1], + "x": xValue, + "y": yValue, } }); } From ea0192cb0ef419b855bfc9676ad551ec956bf3bc Mon Sep 17 00:00:00 2001 From: William Zhu Date: Thu, 1 Jul 2021 14:26:19 -0400 Subject: [PATCH 04/10] feat: formula input can now take px --- components/core/CreateShape.js | 27 +++++++++++++++++++++++++-- components/utils/DraggableVertice.js | 19 ++++++++++++++++--- 2 files changed, 41 insertions(+), 5 deletions(-) diff --git a/components/core/CreateShape.js b/components/core/CreateShape.js index 0401834..3c79093 100644 --- a/components/core/CreateShape.js +++ b/components/core/CreateShape.js @@ -250,8 +250,31 @@ const CreateShape = (props) => { formulaNumbers = formulaNumbers.split(","); newVerticeCoordinates = formulaNumbers.map(x => { let values = x.trim(); - let xValue = values.substring(0, values.indexOf("%") + 1).trim(); - let yValue = values.substring(values.indexOf("%") + 1).trim(); + let xValue = ""; + let yValue = ""; + + if (values.includes("%") && values.includes("px")) { + + let indexOfPX = values.indexOf("px"); + let indexOfPercentage = values.indexOf("%"); + + if (indexOfPX < indexOfPercentage) { + xValue = values.substring(0, values.indexOf("px") + 2).trim(); + yValue = values.substring(values.indexOf("px") + 2).trim(); + } + + if (indexOfPercentage < indexOfPX) { + xValue = values.substring(0, values.indexOf("%") + 1).trim(); + yValue = values.substring(values.indexOf("%") + 1).trim(); + } + + } else if (values.includes("%")) { + xValue = values.substring(0, values.indexOf("%") + 1).trim(); + yValue = values.substring(values.indexOf("%") + 1).trim(); + } else if (values.includes("px")) { + xValue = values.substring(0, values.indexOf("px") + 2).trim(); + yValue = values.substring(values.indexOf("px") + 2).trim(); + } return { "x": xValue, diff --git a/components/utils/DraggableVertice.js b/components/utils/DraggableVertice.js index 40a0f70..4c43a72 100644 --- a/components/utils/DraggableVertice.js +++ b/components/utils/DraggableVertice.js @@ -25,9 +25,22 @@ const CircleVertice = styled.div` const DraggableVertice = (props) => { - // Calculates x and y coordinates based on verticeCoordinates percentages - let x = parseFloat(props.x) * 280.0 / 100.0; - let y = parseFloat(props.y) * 280.0 / 100.0; + let x; + let y; + + // Calculates x coordinates based on percentage or pixels + if (props.x.includes("%")) { + x = parseFloat(props.x) * 280.0 / 100.0; + } else if (props.x.includes("px")) { + x = parseFloat(props.x); + } + + // Calulates y coordinates based on percentage or pixels + if (props.y.includes("%")) { + y = parseFloat(props.y) * 280.0 / 100.0; + } else if (props.y.includes("px")) { + y = parseFloat(props.y); + } // Handles when to show the close button const show = props.focusNumber === props.number; From 31269b56a8eba287d034b35601947471001a2027 Mon Sep 17 00:00:00 2001 From: William Zhu Date: Thu, 1 Jul 2021 14:35:11 -0400 Subject: [PATCH 05/10] feat: formula now remains px or percentage depending on previous state when moving the draggablevertices --- components/core/CreateShape.js | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/components/core/CreateShape.js b/components/core/CreateShape.js index 3c79093..c4f4afa 100644 --- a/components/core/CreateShape.js +++ b/components/core/CreateShape.js @@ -297,13 +297,26 @@ const CreateShape = (props) => { // Returns an array that has a new verticeCoordinate const addNewVerticeCoordinates = (x ,y, number) => { - const xPercentage = Math.round((x / 280.0) * 100.0); - const yPercentage = Math.round((y / 280.0) * 100.0); + + let xValue; + let yValue; + + if (shapeInformation.verticeCoordinates[number].x.includes("%")) { + xValue = Math.round((x / 280.0) * 100.0) + "%"; + } else if (shapeInformation.verticeCoordinates[number].x.includes("px")) { + xValue = Math.round(x) + "px"; + } + + if (shapeInformation.verticeCoordinates[number].y.includes("%")) { + yValue = Math.round((y / 280.0) * 100.0) + "%"; + } else if (shapeInformation.verticeCoordinates[number].y.includes("px")) { + yValue = Math.round(y) + "px"; + } let newVerticeCoordinates = shapeInformation.verticeCoordinates; newVerticeCoordinates[number] = { - "x": xPercentage + "%", - "y": yPercentage + "%" + "x": xValue, + "y": yValue } return newVerticeCoordinates; From f0e6f97891a5f0caa70e119fe564aeca94f3f39c Mon Sep 17 00:00:00 2001 From: William Zhu Date: Thu, 1 Jul 2021 14:44:08 -0400 Subject: [PATCH 06/10] bug: fixed issue where adding new coordinates crashes app --- components/core/CreateShape.js | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/components/core/CreateShape.js b/components/core/CreateShape.js index c4f4afa..4a85f4d 100644 --- a/components/core/CreateShape.js +++ b/components/core/CreateShape.js @@ -253,6 +253,8 @@ const CreateShape = (props) => { let xValue = ""; let yValue = ""; + // If the formula includes both percentage and px + // Figure out which one comes first and use that index of find it if (values.includes("%") && values.includes("px")) { let indexOfPX = values.indexOf("px"); @@ -301,16 +303,25 @@ const CreateShape = (props) => { let xValue; let yValue; - if (shapeInformation.verticeCoordinates[number].x.includes("%")) { + // If there is a new coordinate + if (shapeInformation.verticeCoordinates.length === number) { xValue = Math.round((x / 280.0) * 100.0) + "%"; - } else if (shapeInformation.verticeCoordinates[number].x.includes("px")) { - xValue = Math.round(x) + "px"; - } - - if (shapeInformation.verticeCoordinates[number].y.includes("%")) { yValue = Math.round((y / 280.0) * 100.0) + "%"; - } else if (shapeInformation.verticeCoordinates[number].y.includes("px")) { - yValue = Math.round(y) + "px"; + } else { + + // Determines whether previous x coordinate was in percentage or px and adjusts value to maintain same unit of measurement + if (shapeInformation.verticeCoordinates[number].x.includes("%")) { + xValue = Math.round((x / 280.0) * 100.0) + "%"; + } else if (shapeInformation.verticeCoordinates[number].x.includes("px")) { + xValue = Math.round(x) + "px"; + } + + // Determines whether previous y coordinate was in percentage or px and adjusts value to maintain same unit of measurement + if (shapeInformation.verticeCoordinates[number].y.includes("%")) { + yValue = Math.round((y / 280.0) * 100.0) + "%"; + } else if (shapeInformation.verticeCoordinates[number].y.includes("px")) { + yValue = Math.round(y) + "px"; + } } let newVerticeCoordinates = shapeInformation.verticeCoordinates; From dbf54ced7f0329d586c31bf2f4d0444b7e5e7d72 Mon Sep 17 00:00:00 2001 From: William Zhu Date: Thu, 1 Jul 2021 15:00:05 -0400 Subject: [PATCH 07/10] bug: fixed issue where moving DraggableVertices when the formula is invalid breaks the app --- components/core/CreateShape.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/components/core/CreateShape.js b/components/core/CreateShape.js index 4a85f4d..f243a3f 100644 --- a/components/core/CreateShape.js +++ b/components/core/CreateShape.js @@ -278,6 +278,14 @@ const CreateShape = (props) => { yValue = values.substring(values.indexOf("px") + 2).trim(); } + if (!(xValue.includes("px") || xValue.includes("%")) || xValue.includes(" ")) { + xValue = "0%"; + } + + if (!(yValue.includes("px") || yValue.includes("%")) || yValue === "") { + yValue = "0%"; + } + return { "x": xValue, "y": yValue, @@ -308,7 +316,7 @@ const CreateShape = (props) => { xValue = Math.round((x / 280.0) * 100.0) + "%"; yValue = Math.round((y / 280.0) * 100.0) + "%"; } else { - + // Determines whether previous x coordinate was in percentage or px and adjusts value to maintain same unit of measurement if (shapeInformation.verticeCoordinates[number].x.includes("%")) { xValue = Math.round((x / 280.0) * 100.0) + "%"; From 572223a82ee19a91d7ff7cbc0b7854a4709b5bbe Mon Sep 17 00:00:00 2001 From: William Zhu Date: Thu, 1 Jul 2021 15:31:36 -0400 Subject: [PATCH 08/10] feat: vertices now do not appear when they are out of bounds --- components/utils/DraggableVertice.js | 157 +++++++++++++++++---------- 1 file changed, 102 insertions(+), 55 deletions(-) diff --git a/components/utils/DraggableVertice.js b/components/utils/DraggableVertice.js index 4c43a72..9c4e784 100644 --- a/components/utils/DraggableVertice.js +++ b/components/utils/DraggableVertice.js @@ -1,4 +1,4 @@ -import React, { useRef } from "react"; +import React, { useRef, useState, useEffect } from "react"; // react-draggable npm import Draggable from "react-draggable"; @@ -25,25 +25,68 @@ const CircleVertice = styled.div` const DraggableVertice = (props) => { - let x; - let y; + const [showVertice, setShowVertice] = useState(true); - // Calculates x coordinates based on percentage or pixels - if (props.x.includes("%")) { - x = parseFloat(props.x) * 280.0 / 100.0; - } else if (props.x.includes("px")) { - x = parseFloat(props.x); - } + const [x, setX] = useState(0); + const [y, setY] = useState(0); - // Calulates y coordinates based on percentage or pixels - if (props.y.includes("%")) { - y = parseFloat(props.y) * 280.0 / 100.0; - } else if (props.y.includes("px")) { - y = parseFloat(props.y); - } + useEffect(() => { + + let xValue; + let yValue; + + // Calculates x coordinates based on percentage or pixels + // Determines whether to show them or not depending on if it goes out of the border + if (props.x.includes("%")) { + setX(parseFloat(props.x) * 280.0 / 100.0); + xValue = parseFloat(props.x.substring(0, props.x.indexOf("%") + 1)); + + if (xValue > 100) { + setShowVertice(false); + } else { + setShowVertice(true); + } + + } else if (props.x.includes("px")) { + setX(x = parseFloat(props.x)); + xValue = parseFloat(props.x.substring(0, props.x.indexOf("px") + 2)); + + if (xValue > 280) { + setShowVertice(false); + } else { + setShowVertice(true); + } + + } + + // Calulates y coordinates based on percentage or pixels + if (props.y.includes("%")) { + setY(parseFloat(props.y) * 280.0 / 100.0); + yValue = parseFloat(props.y.substring(0, props.y.indexOf("%") + 1)); + + if (yValue > 100) { + setShowVertice(false); + } else { + setShowVertice(true); + } + + } else if (props.y.includes("px")) { + setY(parseFloat(props.y)); + yValue = parseFloat(props.y.substring(0, props.y.indexOf("px") + 2)); + + if (yValue > 280) { + setShowVertice(false); + } else { + setShowVertice(true); + } + + } + }, [props]) + + // Handles when to show the close button - const show = props.focusNumber === props.number; + const showClose = props.focusNumber === props.number; const target = useRef(null); const handleDrag = (e, data) => { @@ -57,45 +100,49 @@ const DraggableVertice = (props) => { return( <> - {handleDrag(e, data); props.setFocusNumber(-1)}} - > - { - if (show === false) { - props.setFocusNumber(props.number); - } else { - props.setFocusNumber(-1); - } - }} - onTouchStart={() => { - if (show === false) { - props.setFocusNumber(props.number); - } else { - props.setFocusNumber(-1); - } - }} - ref={target} - /> - - - 250 ? "left" : "right"}> - - - - + {showVertice ? + <> + {handleDrag(e, data); props.setFocusNumber(-1)}} + > + { + if (showClose === false) { + props.setFocusNumber(props.number); + } else { + props.setFocusNumber(-1); + } + }} + onTouchStart={() => { + if (showClose === false) { + props.setFocusNumber(props.number); + } else { + props.setFocusNumber(-1); + } + }} + ref={target} + /> + + + 250 ? "left" : "right"}> + + + + + : null + } ); From 81575130d78779dd1e82d8871047129d97d5458e Mon Sep 17 00:00:00 2001 From: William Zhu Date: Sat, 3 Jul 2021 11:26:18 -0400 Subject: [PATCH 09/10] bug: fixed issue where typing in an x in px crashes the app --- components/utils/DraggableVertice.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/utils/DraggableVertice.js b/components/utils/DraggableVertice.js index 9c4e784..d574614 100644 --- a/components/utils/DraggableVertice.js +++ b/components/utils/DraggableVertice.js @@ -48,7 +48,7 @@ const DraggableVertice = (props) => { } } else if (props.x.includes("px")) { - setX(x = parseFloat(props.x)); + setX(parseFloat(props.x)); xValue = parseFloat(props.x.substring(0, props.x.indexOf("px") + 2)); if (xValue > 280) { From 3268246611f9c1e70f450238d86ad62fa182f6c6 Mon Sep 17 00:00:00 2001 From: William Zhu Date: Sat, 3 Jul 2021 11:40:26 -0400 Subject: [PATCH 10/10] yarn lock --- yarn.lock | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/yarn.lock b/yarn.lock index e38bfcc..296bfe6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2628,6 +2628,11 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-double-tap@^1.3.3: + version "1.3.3" + resolved "https://registry.yarnpkg.com/use-double-tap/-/use-double-tap-1.3.3.tgz#96f1863f8fcc4d976b76181c6619d09ca950572f" + integrity sha512-2h7T1T5plYzkQzuugzAiXPUp04iPXB2Uk56RPR9o9tvOWYuXIVaBzU6RXPmT4Fc3VvjK/2p5RA9RxVJg+cOjIw== + use-subscription@1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"