Skip to content

Commit 5666f99

Browse files
dev99problemsdev99problems
committed
PR fix — made some fixed due to the comments
1 parent 11bcd62 commit 5666f99

File tree

6 files changed

+37
-37
lines changed

6 files changed

+37
-37
lines changed

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,6 @@ return /******/ (function(modules) { // webpackBootstrap
140140
this._tryToRestore();
141141
this._listenUnload();
142142

143-
this._drawStartPath();
144143
this._subscribe();
145144
// this._subscribeFocus();
146145
}
@@ -235,8 +234,11 @@ return /******/ (function(modules) { // webpackBootstrap
235234
key: '_tryToRestore',
236235
value: function _tryToRestore() {
237236
var stored = localStorage.getItem(this._localStorage);
237+
var startPathIsSet = this._props.startPath.length > 0;
238238
if (stored) {
239239
this.store.dispatch({ type: 'SET_STATE', data: JSON.parse(stored) });
240+
} else if (startPathIsSet) {
241+
this._drawStartPath();
240242
} else {
241243
(0, _points.reset)(this.store);
242244
}
@@ -384,14 +386,12 @@ return /******/ (function(modules) { // webpackBootstrap
384386
var startPath = this._props.startPath;
385387

386388
var newPoints = [];
387-
if (startPath.length) {
388-
try {
389-
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
390-
path.setAttribute('d', startPath);
391-
newPoints = (0, _getPointsFromPath2.default)(path);
392-
} catch (e) {
393-
console.log('Something went wrong while creating path element');
394-
}
389+
try {
390+
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
391+
path.setAttribute('d', startPath);
392+
newPoints = (0, _getPointsFromPath2.default)(path);
393+
} catch (e) {
394+
console.log('Something went wrong while creating path element');
395395
}
396396

397397
return newPoints;
@@ -12460,20 +12460,20 @@ return /******/ (function(modules) { // webpackBootstrap
1246012460

1246112461
for (var i = 0; i < pathData.length; i++) {
1246212462
var dataSegment = pathData[i];
12463-
var isPointFirstOrLast = i === 0 || i === pathData.length - 1;
12463+
var isFirstOrLastPoint = i === 0 || i === pathData.length - 1;
1246412464
var type = dataSegment.type,
1246512465
values = dataSegment.values;
1246612466

1246712467

12468-
if (type === 'M') {
12468+
if (type === 'M' || type === 'L') {
1246912469
var _values = (0, _slicedToArray3.default)(values, 2),
1247012470
x = _values[0],
1247112471
y = _values[1];
1247212472

1247312473
points.push({
1247412474
x: x,
1247512475
y: y * CURVE_PERCENT,
12476-
isLockedX: isPointFirstOrLast
12476+
isLockedX: isFirstOrLastPoint
1247712477
});
1247812478
} else if (type === 'C') {
1247912479
var _values2 = (0, _slicedToArray3.default)(values, 6),
@@ -12493,7 +12493,7 @@ return /******/ (function(modules) { // webpackBootstrap
1249312493
y: yNext * CURVE_PERCENT,
1249412494
type: 'disconnected',
1249512495
handle1: (0, _pointToAngle2.default)((x2 - xNext) * CURVE_PERCENT, (y2 - yNext) * CURVE_PERCENT),
12496-
isLockedX: isPointFirstOrLast
12496+
isLockedX: isFirstOrLastPoint
1249712497
};
1249812498

1249912499
points.push(point);

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

Lines changed: 3 additions & 3 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 & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,7 @@
6969
<script>
7070
var curveEditor = new MojsCurveEditor({
7171
name: 'some name',
72-
// startPath: `M0, 100 C0, 100 0.8984745544778932, 50.95866830266492 25, 50 C49.10152544552211,
73-
// 49.04133169733503 51.96319007561603, 75.26435154097881 75, 75 C98.03680992438396,
74-
// 74.73564845902116 42.46990312590646, 3.8158111598078124 100, 0`
72+
// startPath: 'M0, 100 L100, 0'
7573
// onChange(path) { console.log(path); },
7674
// isHiddenOnMin: true
7775
}).toggleSize();

‎app/js/app.babel.jsx

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ class API {
2424
this._tryToRestore();
2525
this._listenUnload();
2626

27-
this._drawStartPath();
2827
this._subscribe();
2928
// this._subscribeFocus();
3029
}
@@ -104,8 +103,12 @@ class API {
104103

105104
_tryToRestore () {
106105
const stored = localStorage.getItem(this._localStorage);
107-
if ( stored ) { this.store.dispatch({ type: 'SET_STATE', data: JSON.parse(stored) });}
108-
else { reset(this.store); }
106+
const startPathIsSet = this._props.startPath.length > 0;
107+
if ( stored ) {
108+
this.store.dispatch({ type: 'SET_STATE', data: JSON.parse(stored) });
109+
} else if (startPathIsSet) {
110+
this._drawStartPath();
111+
} else { reset(this.store); }
109112
}
110113

111114
_subscribe () {
@@ -213,14 +216,12 @@ class API {
213216
_getStartPathPoints() {
214217
const { startPath } = this._props;
215218
let newPoints = [];
216-
if (startPath.length) {
217-
try {
218-
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
219-
path.setAttribute('d', startPath);
220-
newPoints = transformPathSegments(path);
221-
} catch (e) {
222-
console.log('Something went wrong while creating path element');
223-
}
219+
try {
220+
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
221+
path.setAttribute('d', startPath);
222+
newPoints = transformPathSegments(path);
223+
} catch (e) {
224+
console.log('Something went wrong while creating path element');
224225
}
225226

226227
return newPoints;

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ export default (path) => {
99

1010
for (let i = 0; i < pathData.length; i++) {
1111
const dataSegment = pathData[i];
12-
const isPointFirstOrLast = (i === 0 || i === pathData.length - 1);
12+
const isFirstOrLastPoint = (i === 0 || i === pathData.length - 1);
1313
const {type, values} = dataSegment;
1414

15-
if (type === 'M') {
16-
let [x, y] = values;
15+
if (type === 'M' || type === 'L') {
16+
const [x, y] = values;
1717
points.push({
1818
x,
1919
y: y * CURVE_PERCENT,
20-
isLockedX: isPointFirstOrLast
20+
isLockedX: isFirstOrLastPoint
2121
});
2222
} else if (type === 'C') {
2323
const [x1, y1, x2, y2, xNext, yNext] = values;
@@ -33,7 +33,7 @@ export default (path) => {
3333
y: yNext * CURVE_PERCENT,
3434
type: 'disconnected',
3535
handle1: pointToAngle((x2 - xNext) * CURVE_PERCENT, (y2 - yNext) * CURVE_PERCENT),
36-
isLockedX: isPointFirstOrLast
36+
isLockedX: isFirstOrLastPoint
3737
}
3838

3939
points.push(point);

‎readme.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,9 @@ const curveEditor = new MojsCurveEditor({
111111
name: 'bounce curve'
112112
// if should preserve state on page reloads
113113
isSaveState: true,
114-
// if should draw some predefined start path, e.g.
115-
startPath: 'M0, 100 C0, 100 4.930113045746978, 71.79835171700789 22.72727272727273, 50 C40.5244324087985, 28.20164828299213 106.34550121203085, 39.38723973123639 100, 15',
114+
// start path - will be loaded on initialization of the curve,
115+
// e.g. before any user modifications were made. Path of 'M0, 100 L100, 0' is set by default.
116+
startPath: 'M0, 100 L100, 0',
116117
// callback on path change, accepts path string
117118
onChange: function (path) {}
118119
// if should hide when minimized - useful when you try to embed the

0 commit comments

Comments
 (0)