diff --git a/components/core/CreateShape.js b/components/core/CreateShape.js
index 68f8e56..f243a3f 100644
--- a/components/core/CreateShape.js
+++ b/components/core/CreateShape.js
@@ -247,13 +247,49 @@ 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 values = x.trim();
+ 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");
+ 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();
+ }
+
+ if (!(xValue.includes("px") || xValue.includes("%")) || xValue.includes(" ")) {
+ xValue = "0%";
+ }
+
+ if (!(yValue.includes("px") || yValue.includes("%")) || yValue === "") {
+ yValue = "0%";
+ }
+
+ return {
+ "x": xValue,
+ "y": yValue,
+ }
});
}
@@ -261,7 +297,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,
@@ -271,13 +307,35 @@ 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 there is a new coordinate
+ if (shapeInformation.verticeCoordinates.length === number) {
+ 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) + "%";
+ } 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;
newVerticeCoordinates[number] = {
- "x": xPercentage + "%",
- "y": yPercentage + "%"
+ "x": xValue,
+ "y": yValue
}
return newVerticeCoordinates;
diff --git a/components/utils/DraggableVertice.js b/components/utils/DraggableVertice.js
index 40a0f70..d574614 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,12 +25,68 @@ 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;
+ const [showVertice, setShowVertice] = useState(true);
+
+ const [x, setX] = useState(0);
+ const [y, setY] = useState(0);
+
+ 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(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) => {
@@ -44,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
+ }
);
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"