Skip to content

Commit e9a8aa6

Browse files
legomushroomlegomushroom
committed
🛠️ refactor few functions
1 parent dd562d8 commit e9a8aa6

File tree

9 files changed

+1405
-85
lines changed

9 files changed

+1405
-85
lines changed

‎app/build/mojs-curve-editor.js‎

Lines changed: 1321 additions & 26 deletions
Large diffs are not rendered by default.

‎app/build/mojs-curve-editor.min.js‎

Lines changed: 7 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
<script>
7070
var curveEditor = new MojsCurveEditor({
7171
name: 'some name',
72-
// startPath: 'M0, 100 L100, 0'
72+
startPath: 'M0, 50 C0, 50 8.857444030665526, 10.092762422806425 47.714285714285715, 20 C61.55713283389225, 23.52947818753174 63.32900551466363, 59.75358052881853 75, 75 C86.67099448533637, 90.24641947118145 100, 50 100, 50 '
7373
// onChange(path) { console.log(path); },
7474
// isHiddenOnMin: true
7575
});

‎app/js/actions/points.babel.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import C from '../constants';
2-
3-
export function reset (store) {
4-
store.dispatch({ type: 'POINTS_REMOVE' });
5-
store.dispatch({ type: 'POINT_ADD', data: { point: {x: 0, y: C.CURVE_SIZE, isLockedX: true}, index: 0 } });
6-
store.dispatch({ type: 'POINT_ADD', data: { point: {x: 100, y: 0, isLockedX: true}, index: 1 } });
7-
}
1+
// import C from '../constants';
2+
//
3+
// export function reset (store) {
4+
// store.dispatch({ type: 'POINTS_REMOVE' });
5+
// store.dispatch({ type: 'POINT_ADD', data: { point: {x: 0, y: C.CURVE_SIZE, isLockedX: true}, index: 0 } });
6+
// store.dispatch({ type: 'POINT_ADD', data: { point: {x: 100, y: 0, isLockedX: true}, index: 1 } });
7+
// }

‎app/js/app.babel.jsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import C from './constants';
66
import hash from './helpers/hash';
77
import fallbackTo from './helpers/fallback-to';
88
import defer from './helpers/defer';
9-
import {reset} from './actions/points';
9+
// import {reset} from './actions/points';
1010
import addPointerDown from './helpers/add-pointer-down';
1111
import transformPathSegments from './helpers/get-points-from-path';
1212

@@ -33,7 +33,7 @@ class API {
3333
name: 'mojs-curve-editor',
3434
isSaveState: true,
3535
isHiddenOnMin: false,
36-
startPath: '',
36+
startPath: 'M0,100 L100,0',
3737
onChange: null
3838
}
3939
}
@@ -47,7 +47,7 @@ class API {
4747
}
4848

4949
_vars () {
50-
this.revision = '1.6.1';
50+
this.revision = '1.7.0';
5151
this.store = initStore();
5252

5353
this._easings = [];
@@ -103,12 +103,11 @@ class API {
103103

104104
_tryToRestore () {
105105
const stored = localStorage.getItem(this._localStorage);
106-
const startPathIsSet = this._props.startPath.length > 0;
106+
107107
if ( stored ) {
108108
this.store.dispatch({ type: 'SET_STATE', data: JSON.parse(stored) });
109-
} else if (startPathIsSet) {
110-
this._drawStartPath();
111-
} else { reset(this.store); }
109+
} else { this._drawStartPath(); }
110+
112111
}
113112

114113
_subscribe () {
@@ -229,7 +228,6 @@ class API {
229228
on the each component in the Components Tree.
230229
*/
231230
destroy() {
232-
// console.log(this._rootEl);
233231
const NullComponent = () => { return null };
234232
render(
235233
<NullComponent />,
@@ -246,7 +244,7 @@ class API {
246244
path.setAttribute('d', startPath);
247245
newPoints = transformPathSegments(path);
248246
} catch (e) {
249-
console.log('Something went wrong while creating path element');
247+
console.error('Something went wrong while parsing `startPath`', e);
250248
}
251249

252250
return newPoints;
@@ -258,10 +256,7 @@ class API {
258256
this.store.dispatch({ type: 'POINTS_REMOVE' });
259257

260258
newPoints.forEach((point, index) => {
261-
this.store.dispatch({
262-
type: 'POINT_ADD',
263-
data: { point, index }
264-
});
259+
this.store.dispatch({ type: 'POINT_ADD', data: { point, index } });
265260
});
266261
}
267262
}

‎app/js/helpers/get-points-from-path.babel.js‎

Lines changed: 12 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,24 @@
11
import 'path-data-polyfill';
2-
import pointToAngle from './point-to-angle';
3-
import C from '../constants';
4-
const { CURVE_PERCENT } = C;
2+
import parseC from './parse-path-coordinates/c';
3+
import parseM from './parse-path-coordinates/m';
54

65
export default (path) => {
7-
const points = [];
6+
let points = [];
87
const pathData = path.getPathData();
98

109
for (let i = 0; i < pathData.length; i++) {
11-
const dataSegment = pathData[i];
1210
const isFirstOrLastPoint = (i === 0 || i === pathData.length - 1);
13-
const {type, values} = dataSegment;
11+
const {type, values} = pathData[i];
1412

15-
if (type === 'M' || type === 'L') {
16-
const [x, y] = values;
17-
points.push({
18-
x,
19-
y: y * CURVE_PERCENT,
20-
isLockedX: isFirstOrLastPoint
21-
});
22-
} else if (type === 'C') {
23-
const [x1, y1, x2, y2, xNext, yNext] = values;
24-
const prevPoint = points[i - 1];
25-
const prevHandle = pointToAngle(
26-
(x1 - prevPoint.x) * CURVE_PERCENT,
27-
(y1 * CURVE_PERCENT) - prevPoint.y
28-
);
29-
prevPoint.handle2 = prevHandle;
13+
switch(type) {
14+
case 'M':
15+
case 'L':
16+
points = parseM(values, points, isFirstOrLastPoint);
17+
break;
3018

31-
const point = {
32-
x: xNext,
33-
y: yNext * CURVE_PERCENT,
34-
type: 'disconnected',
35-
handle1: pointToAngle((x2 - xNext) * CURVE_PERCENT, (y2 - yNext) * CURVE_PERCENT),
36-
isLockedX: isFirstOrLastPoint
37-
}
38-
39-
points.push(point);
19+
case 'C':
20+
points = parseC(values, points, isFirstOrLastPoint);
21+
break;
4022
}
4123
}
4224

‎app/js/helpers/parse-path-coordinates/c.babel.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import pointToAngle from '../point-to-angle';
2+
import C from '../../constants';
3+
4+
const { CURVE_PERCENT } = C;
5+
/**
6+
* Function to parse *C* `SVG` path command.
7+
* @param {Array} parsed `C` values.
8+
* @param {Array} result array of points parsed so far.
9+
* @returns {Array} array with new parsed points.
10+
*/
11+
export default (values, points, isLockedX) => {
12+
const [x1, y1, x2, y2, xNext, yNext] = values;
13+
const prevPoint = points[points.length - 1];
14+
15+
const prevHandle = pointToAngle(
16+
(x1 - prevPoint.x) * CURVE_PERCENT,
17+
(y1 * CURVE_PERCENT) - prevPoint.y
18+
);
19+
prevPoint.handle2 = prevHandle;
20+
21+
const point = {
22+
x: xNext,
23+
y: yNext * CURVE_PERCENT,
24+
type: 'disconnected',
25+
handle1: pointToAngle((x2 - xNext) * CURVE_PERCENT, (y2 - yNext) * CURVE_PERCENT),
26+
isLockedX
27+
}
28+
29+
return [...points, point];
30+
};

‎app/js/helpers/parse-path-coordinates/m.babel.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import C from '../../constants';
2+
3+
/**
4+
* Function to parse *M* or *L* `SVG` path command.
5+
* @param {Array} parsed `M` or `L` values.
6+
* @param {Array} result array of points parsed so far.
7+
* @returns {Array} array with new parsed points.
8+
*/
9+
export default (values, points, isLockedX) => {
10+
const [x, y] = values;
11+
const newPoint = { x, y: y*C.CURVE_PERCENT, isLockedX };
12+
13+
return [...points, newPoint];
14+
};

‎app/js/helpers/point-to-angle.babel.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
export default (x, y) => {
2-
let radius = Math.sqrt( x*x + y*y ),
3-
angle = Math.atan( y/x ) * (180/Math.PI) - 90;
2+
const radius = Math.sqrt( x*x + y*y );
3+
// if `x === 0` set x to 1 because we will divide by `x`
4+
// and division by 0 is forbidden. (x || 1) part
5+
let angle = Math.atan( y/(x || 1) ) * (180/Math.PI) - 90;
46
if ( x > 0 ) { angle = angle - 180 };
57

68
return { radius, angle };
7-
}
9+
}

0 commit comments

Comments
 (0)