Skip to content

Commit 35cc4a9

Browse files
atapasatapas
authored
Merge pull request #59 from TryShape/issue-58-clip-path-without-spaces-do-not-render-DraggableVertices
Issue 58 clip path without spaces do not render draggable vertices
2 parents ee3cf16 + 3268246 commit 35cc4a9

File tree

3 files changed

+178
-55
lines changed

3 files changed

+178
-55
lines changed

‎components/core/CreateShape.js‎

Lines changed: 69 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -247,21 +247,57 @@ const CreateShape = (props) => {
247247

248248
if (clipPathType === "polygon") {
249249
let formulaNumbers = formula.slice(formula.indexOf("(") + 1, formula.indexOf(")"));
250-
formulaNumbers = formulaNumbers.split(", ");
250+
formulaNumbers = formulaNumbers.split(",");
251251
newVerticeCoordinates = formulaNumbers.map(x => {
252-
let percentageArray = x.split(" ");
253-
return {
254-
"x": percentageArray[0],
255-
"y": percentageArray[1],
256-
}
252+
let values = x.trim();
253+
let xValue = "";
254+
let yValue = "";
255+
256+
// If the formula includes both percentage and px
257+
// Figure out which one comes first and use that index of find it
258+
if (values.includes("%") && values.includes("px")) {
259+
260+
let indexOfPX = values.indexOf("px");
261+
let indexOfPercentage = values.indexOf("%");
262+
263+
if (indexOfPX < indexOfPercentage) {
264+
xValue = values.substring(0, values.indexOf("px") + 2).trim();
265+
yValue = values.substring(values.indexOf("px") + 2).trim();
266+
}
267+
268+
if (indexOfPercentage < indexOfPX) {
269+
xValue = values.substring(0, values.indexOf("%") + 1).trim();
270+
yValue = values.substring(values.indexOf("%") + 1).trim();
271+
}
272+
273+
} else if (values.includes("%")) {
274+
xValue = values.substring(0, values.indexOf("%") + 1).trim();
275+
yValue = values.substring(values.indexOf("%") + 1).trim();
276+
} else if (values.includes("px")) {
277+
xValue = values.substring(0, values.indexOf("px") + 2).trim();
278+
yValue = values.substring(values.indexOf("px") + 2).trim();
279+
}
280+
281+
if (!(xValue.includes("px") || xValue.includes("%")) || xValue.includes(" ")) {
282+
xValue = "0%";
283+
}
284+
285+
if (!(yValue.includes("px") || yValue.includes("%")) || yValue === "") {
286+
yValue = "0%";
287+
}
288+
289+
return {
290+
"x": xValue,
291+
"y": yValue,
292+
}
257293
});
258294
}
259295

260296
setShapeInformation(prevState => {
261297
return {
262298
...prevState,
263299
"formula": formula.includes("(") && formula.includes(")") ? formula : prevState.formula,
264-
"clipPathType": clipPathType === null ? prevState.clipPathType : clipPathType,
300+
"clipPathType": clipPathType === undefined ? prevState.clipPathType : clipPathType,
265301
"vertices": edgeVerticeNumber,
266302
"edges": edgeVerticeNumber,
267303
"verticeCoordinates": newVerticeCoordinates,
@@ -271,13 +307,35 @@ const CreateShape = (props) => {
271307

272308
// Returns an array that has a new verticeCoordinate
273309
const addNewVerticeCoordinates = (x ,y, number) => {
274-
const xPercentage = Math.round((x / 280.0) * 100.0);
275-
const yPercentage = Math.round((y / 280.0) * 100.0);
310+
311+
let xValue;
312+
let yValue;
313+
314+
// If there is a new coordinate
315+
if (shapeInformation.verticeCoordinates.length === number) {
316+
xValue = Math.round((x / 280.0) * 100.0) + "%";
317+
yValue = Math.round((y / 280.0) * 100.0) + "%";
318+
} else {
319+
320+
// Determines whether previous x coordinate was in percentage or px and adjusts value to maintain same unit of measurement
321+
if (shapeInformation.verticeCoordinates[number].x.includes("%")) {
322+
xValue = Math.round((x / 280.0) * 100.0) + "%";
323+
} else if (shapeInformation.verticeCoordinates[number].x.includes("px")) {
324+
xValue = Math.round(x) + "px";
325+
}
326+
327+
// Determines whether previous y coordinate was in percentage or px and adjusts value to maintain same unit of measurement
328+
if (shapeInformation.verticeCoordinates[number].y.includes("%")) {
329+
yValue = Math.round((y / 280.0) * 100.0) + "%";
330+
} else if (shapeInformation.verticeCoordinates[number].y.includes("px")) {
331+
yValue = Math.round(y) + "px";
332+
}
333+
}
276334

277335
let newVerticeCoordinates = shapeInformation.verticeCoordinates;
278336
newVerticeCoordinates[number] = {
279-
"x": xPercentage + "%",
280-
"y": yPercentage + "%"
337+
"x": xValue,
338+
"y": yValue
281339
}
282340

283341
return newVerticeCoordinates;

‎components/utils/DraggableVertice.js‎

Lines changed: 104 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useRef } from "react";
1+
import React, { useRef, useState, useEffect } from "react";
22

33
// react-draggable npm
44
import Draggable from "react-draggable";
@@ -25,12 +25,68 @@ const CircleVertice = styled.div`
2525

2626
const DraggableVertice = (props) => {
2727

28-
// Calculates x and y coordinates based on verticeCoordinates percentages
29-
let x = parseFloat(props.x) * 280.0 / 100.0;
30-
let y = parseFloat(props.y) * 280.0 / 100.0;
28+
const [showVertice, setShowVertice] = useState(true);
29+
30+
const [x, setX] = useState(0);
31+
const [y, setY] = useState(0);
32+
33+
useEffect(() => {
34+
35+
let xValue;
36+
let yValue;
37+
38+
// Calculates x coordinates based on percentage or pixels
39+
// Determines whether to show them or not depending on if it goes out of the border
40+
if (props.x.includes("%")) {
41+
setX(parseFloat(props.x) * 280.0 / 100.0);
42+
xValue = parseFloat(props.x.substring(0, props.x.indexOf("%") + 1));
43+
44+
if (xValue > 100) {
45+
setShowVertice(false);
46+
} else {
47+
setShowVertice(true);
48+
}
49+
50+
} else if (props.x.includes("px")) {
51+
setX(parseFloat(props.x));
52+
xValue = parseFloat(props.x.substring(0, props.x.indexOf("px") + 2));
53+
54+
if (xValue > 280) {
55+
setShowVertice(false);
56+
} else {
57+
setShowVertice(true);
58+
}
59+
60+
}
61+
62+
// Calulates y coordinates based on percentage or pixels
63+
if (props.y.includes("%")) {
64+
setY(parseFloat(props.y) * 280.0 / 100.0);
65+
yValue = parseFloat(props.y.substring(0, props.y.indexOf("%") + 1));
66+
67+
if (yValue > 100) {
68+
setShowVertice(false);
69+
} else {
70+
setShowVertice(true);
71+
}
72+
73+
} else if (props.y.includes("px")) {
74+
setY(parseFloat(props.y));
75+
yValue = parseFloat(props.y.substring(0, props.y.indexOf("px") + 2));
76+
77+
if (yValue > 280) {
78+
setShowVertice(false);
79+
} else {
80+
setShowVertice(true);
81+
}
82+
83+
}
84+
}, [props])
85+
86+
3187

3288
// Handles when to show the close button
33-
const show = props.focusNumber === props.number;
89+
const showClose = props.focusNumber === props.number;
3490
const target = useRef(null);
3591

3692
const handleDrag = (e, data) => {
@@ -44,45 +100,49 @@ const DraggableVertice = (props) => {
44100

45101
return(
46102
<>
47-
<Draggable
48-
bounds="parent"
49-
handle=".handle"
50-
position={{x: x, y: y}}
51-
grid={[2.8, 2.8]}
52-
onDrag={(e, data) => {handleDrag(e, data); props.setFocusNumber(-1)}}
53-
>
54-
<CircleVertice
55-
className="handle"
56-
onClick={() => {
57-
if (show === false) {
58-
props.setFocusNumber(props.number);
59-
} else {
60-
props.setFocusNumber(-1);
61-
}
62-
}}
63-
onTouchStart={() => {
64-
if (show === false) {
65-
props.setFocusNumber(props.number);
66-
} else {
67-
props.setFocusNumber(-1);
68-
}
69-
}}
70-
ref={target}
71-
/>
72-
</Draggable>
73-
74-
<Overlay target={target.current}
75-
show={show}
76-
placement={x > 250 ? "left" : "right"}>
77-
<Tooltip>
78-
<FiDelete
79-
size="24px"
80-
id={"deleteButton" + props.number}
81-
onMouseUp={handleDelete}
82-
style={{ cursor: "pointer" }}
83-
/>
84-
</Tooltip>
85-
</Overlay>
103+
{showVertice ?
104+
<>
105+
<Draggable
106+
bounds="parent"
107+
handle=".handle"
108+
position={{x: x, y: y}}
109+
grid={[2.8, 2.8]}
110+
onDrag={(e, data) => {handleDrag(e, data); props.setFocusNumber(-1)}}
111+
>
112+
<CircleVertice
113+
className="handle"
114+
onClick={() => {
115+
if (showClose === false) {
116+
props.setFocusNumber(props.number);
117+
} else {
118+
props.setFocusNumber(-1);
119+
}
120+
}}
121+
onTouchStart={() => {
122+
if (showClose === false) {
123+
props.setFocusNumber(props.number);
124+
} else {
125+
props.setFocusNumber(-1);
126+
}
127+
}}
128+
ref={target}
129+
/>
130+
</Draggable>
131+
132+
<Overlay target={target.current}
133+
show={showClose}
134+
placement={x > 250 ? "left" : "right"}>
135+
<Tooltip>
136+
<FiDelete
137+
size="24px"
138+
id={"deleteButton" + props.number}
139+
onMouseUp={handleDelete}
140+
style={{ cursor: "pointer" }}
141+
/>
142+
</Tooltip>
143+
</Overlay>
144+
</> : null
145+
}
86146
</>
87147
);
88148

‎yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2628,6 +2628,11 @@ url@^0.11.0:
26282628
punycode "1.3.2"
26292629
querystring "0.2.0"
26302630

2631+
use-double-tap@^1.3.3:
2632+
version "1.3.3"
2633+
resolved "https://registry.yarnpkg.com/use-double-tap/-/use-double-tap-1.3.3.tgz#96f1863f8fcc4d976b76181c6619d09ca950572f"
2634+
integrity sha512-2h7T1T5plYzkQzuugzAiXPUp04iPXB2Uk56RPR9o9tvOWYuXIVaBzU6RXPmT4Fc3VvjK/2p5RA9RxVJg+cOjIw==
2635+
26312636
[email protected]:
26322637
version "1.5.1"
26332638
resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"

0 commit comments

Comments
 (0)