Skip to content

Issue 58 clip path without spaces do not render draggable vertices #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Jul 6, 2021
Merged

Issue 58 clip path without spaces do not render draggable vertices #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6a8ddfa
feat: fixed issue where typing out clip-path that spaces after commas…
williamzhu17 Jun 28, 2021
4b68e84
feat: fixed issue where copy and pasting clip-path without spaces doe…
williamzhu17 Jun 28, 2021
2571971
feat: CreateShape can now read clip-path formulas without spaces inbe…
williamzhu17 Jun 28, 2021
ea0192c
feat: formula input can now take px
williamzhu17 Jul 1, 2021
31269b5
feat: formula now remains px or percentage depending on previous stat…
williamzhu17 Jul 1, 2021
f0e6f97
bug: fixed issue where adding new coordinates crashes app
williamzhu17 Jul 1, 2021
dbf54ce
bug: fixed issue where moving DraggableVertices when the formula is i…
williamzhu17 Jul 1, 2021
572223a
feat: vertices now do not appear when they are out of bounds
williamzhu17 Jul 1, 2021
8157513
bug: fixed issue where typing in an x in px crashes the app
williamzhu17 Jul 3, 2021
f6a3543
Merge remote-tracking branch 'origin/main' into issue-58-clip-path-wi…
williamzhu17 Jul 3, 2021
3268246
yarn lock
williamzhu17 Jul 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 69 additions & 11 deletions components/core/CreateShape.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,21 +247,57 @@ 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,
}
});
}

setShapeInformation(prevState => {
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,
Expand All @@ -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;
Expand Down
148 changes: 104 additions & 44 deletions components/utils/DraggableVertice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useRef } from "react";
import React, { useRef, useState, useEffect } from "react";

// react-draggable npm
import Draggable from "react-draggable";
Expand All @@ -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) => {
Expand All @@ -44,45 +100,49 @@ const DraggableVertice = (props) => {

return(
<>
<Draggable
bounds="parent"
handle=".handle"
position={{x: x, y: y}}
grid={[2.8, 2.8]}
onDrag={(e, data) => {handleDrag(e, data); props.setFocusNumber(-1)}}
>
<CircleVertice
className="handle"
onClick={() => {
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}
/>
</Draggable>

<Overlay target={target.current}
show={show}
placement={x > 250 ? "left" : "right"}>
<Tooltip>
<FiDelete
size="24px"
id={"deleteButton" + props.number}
onMouseUp={handleDelete}
style={{ cursor: "pointer" }}
/>
</Tooltip>
</Overlay>
{showVertice ?
<>
<Draggable
bounds="parent"
handle=".handle"
position={{x: x, y: y}}
grid={[2.8, 2.8]}
onDrag={(e, data) => {handleDrag(e, data); props.setFocusNumber(-1)}}
>
<CircleVertice
className="handle"
onClick={() => {
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}
/>
</Draggable>

<Overlay target={target.current}
show={showClose}
placement={x > 250 ? "left" : "right"}>
<Tooltip>
<FiDelete
size="24px"
id={"deleteButton" + props.number}
onMouseUp={handleDelete}
style={{ cursor: "pointer" }}
/>
</Tooltip>
</Overlay>
</> : null
}
</>
);

Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down