Skip to content

Commit 5f1c8a9

Browse files
legomushroomlegomushroom
committed
refactor curve size to a constant
1 parent c8aeb14 commit 5f1c8a9

File tree

9 files changed

+101
-42
lines changed

9 files changed

+101
-42
lines changed

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

Lines changed: 63 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ return /******/ (function(modules) { // webpackBootstrap
7575
/******/ }
7676
/******/
7777
/******/ var hotApplyOnUpdate = true;
78-
/******/ var hotCurrentHash = "ee7ece084b1210d2bf1a"; // eslint-disable-line no-unused-vars
78+
/******/ var hotCurrentHash = "0c12eca309296d90b0aa"; // eslint-disable-line no-unused-vars
7979
/******/ var hotCurrentModuleData = {};
8080
/******/ var hotCurrentParents = []; // eslint-disable-line no-unused-vars
8181
/******/
@@ -3297,6 +3297,10 @@ return /******/ (function(modules) { // webpackBootstrap
32973297

32983298
var _this = this;
32993299

3300+
var _constants = __webpack_require__(139);
3301+
3302+
var _constants2 = _interopRequireDefault(_constants);
3303+
33003304
var _hammerjs = __webpack_require__(102);
33013305

33023306
var _hammerjs2 = _interopRequireDefault(_hammerjs);
@@ -3373,8 +3377,8 @@ return /******/ (function(modules) { // webpackBootstrap
33733377
temp_bottom += state.bottom;
33743378
temp_right += state.right;
33753379

3376-
var X_SIZE = 411;
3377-
var Y_SIZE = 378;
3380+
var X_SIZE = _constants2.default.CURVE_SIZE + 53;
3381+
var Y_SIZE = _constants2.default.CURVE_SIZE + 2 * _constants2.default.CURVE_PADDING;
33783382

33793383
// constrain min height
33803384
if (Y_SIZE - temp_top < Y_SIZE) {
@@ -3807,6 +3811,10 @@ return /******/ (function(modules) { // webpackBootstrap
38073811

38083812
var _resizeMod2 = _interopRequireDefault(_resizeMod);
38093813

3814+
var _constants = __webpack_require__(139);
3815+
3816+
var _constants2 = _interopRequireDefault(_constants);
3817+
38103818
var _hammerjs = __webpack_require__(102);
38113819

38123820
var _hammerjs2 = _interopRequireDefault(_hammerjs);
@@ -3827,9 +3835,9 @@ return /******/ (function(modules) { // webpackBootstrap
38273835
x = point.x + point.tempX,
38283836
y = point.y + point.tempY;
38293837
if (i === 0) {
3830-
str += 'M' + x + ', ' + y / 3.58 + ' ';
3838+
str += 'M' + x + ', ' + y / _constants2.default.CURVE_PERCENT + ' ';
38313839
} else {
3832-
str += 'L' + x + ', ' + y / 3.58 + ' ';
3840+
str += 'L' + x + ', ' + y / _constants2.default.CURVE_PERCENT + ' ';
38333841
}
38343842
}
38353843
_this.path = str;
@@ -3841,7 +3849,7 @@ return /******/ (function(modules) { // webpackBootstrap
38413849

38423850
temp_top += resize.top;
38433851

3844-
if (358 - temp_top < 358) {
3852+
if (_constants2.default.CURVE_SIZE - temp_top < _constants2.default.CURVE_SIZE) {
38453853
temp_top = 0;
38463854
}
38473855
temp_top = (0, _resizeMod2.default)(temp_top, -1);
@@ -3868,7 +3876,7 @@ return /******/ (function(modules) { // webpackBootstrap
38683876
// const startChar = (i === 1) ? 'M' : 'L'
38693877
_this.segments.push({
38703878
index: i,
3871-
string: 'M' + px + ', ' + py / 3.58 + ' L' + x + ', ' + y / 3.58
3879+
string: 'M' + px + ', ' + py / _constants2.default.CURVE_PERCENT + ' L' + x + ', ' + y / _constants2.default.CURVE_PERCENT
38723880
});
38733881
}
38743882
};
@@ -3901,7 +3909,7 @@ return /******/ (function(modules) { // webpackBootstrap
39013909
}
39023910
// coordinates
39033911
var x = ev.offsetX,
3904-
y = ev.offsetY * 3.58,
3912+
y = ev.offsetY * _constants2.default.CURVE_PERCENT,
39053913
index = parseInt(target.getAttribute('data-index'));
39063914

39073915
_store2.default.dispatch({
@@ -3937,6 +3945,10 @@ return /******/ (function(modules) { // webpackBootstrap
39373945

39383946
var _store2 = _interopRequireDefault(_store);
39393947

3948+
var _constants = __webpack_require__(139);
3949+
3950+
var _constants2 = _interopRequireDefault(_constants);
3951+
39403952
var _hammerjs = __webpack_require__(102);
39413953

39423954
var _hammerjs2 = _interopRequireDefault(_hammerjs);
@@ -4019,7 +4031,7 @@ return /******/ (function(modules) { // webpackBootstrap
40194031

40204032
var y = _this.point.y + e.deltaY;
40214033
// clamp y to the size of curve
4022-
return clamp(y, resize.top, 358 + resize.bottom);
4034+
return clamp(y, resize.top, _constants2.default.CURVE_SIZE + resize.bottom);
40234035
};
40244036

40254037
// get y delta reagarding curve bounds
@@ -4032,8 +4044,8 @@ return /******/ (function(modules) { // webpackBootstrap
40324044
if (y < resize.top) {
40334045
return resize.top - _this.point.y;
40344046
}
4035-
if (y > 358 + resize.bottom) {
4036-
return 358 + resize.bottom - _this.point.y;
4047+
if (y > _constants2.default.CURVE_SIZE + resize.bottom) {
4048+
return _constants2.default.CURVE_SIZE + resize.bottom - _this.point.y;
40374049
}
40384050
return e.deltaY;
40394051
};
@@ -6149,6 +6161,10 @@ return /******/ (function(modules) { // webpackBootstrap
61496161

61506162
var _extends5 = _interopRequireDefault(_extends4);
61516163

6164+
var _constants = __webpack_require__(139);
6165+
6166+
var _constants2 = _interopRequireDefault(_constants);
6167+
61526168
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
61536169

61546170
var INITIAL_STATE = {
@@ -6161,7 +6177,7 @@ return /******/ (function(modules) { // webpackBootstrap
61616177

61626178
bottom: 0,
61636179
temp_bottom: 0,
6164-
scalerX: 3.58
6180+
scalerX: _constants2.default.CURVE_PERCENT
61656181
};
61666182

61676183
var resizeReducer = function resizeReducer() {
@@ -6178,7 +6194,7 @@ return /******/ (function(modules) { // webpackBootstrap
61786194
var newState = (0, _extends5.default)({}, state, (0, _defineProperty3.default)({}, 'temp_' + type, delta));
61796195
// if `right`size changed - calculate the scaler for x axis
61806196
if (type === 'right') {
6181-
newState['scalerX'] = (358 + Math.max(state.right + delta, 0)) / 100;
6197+
newState['scalerX'] = (_constants2.default.CURVE_SIZE + Math.max(state.right + delta, 0)) / 100;
61826198
}
61836199
return newState;
61846200
}
@@ -6285,9 +6301,13 @@ return /******/ (function(modules) { // webpackBootstrap
62856301

62866302
var _makePoint2 = _interopRequireDefault(_makePoint);
62876303

6304+
var _constants = __webpack_require__(139);
6305+
6306+
var _constants2 = _interopRequireDefault(_constants);
6307+
62886308
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
62896309

6290-
var INITIAL_STATE = [(0, _makePoint2.default)({ x: 0, y: 358, isLockedX: true }), (0, _makePoint2.default)({ x: 50, y: 179, type: 'mirrored' }), (0, _makePoint2.default)({ x: 100, y: 0, isLockedX: true })];
6310+
var INITIAL_STATE = [(0, _makePoint2.default)({ x: 0, y: _constants2.default.CURVE_SIZE, isLockedX: true }), (0, _makePoint2.default)({ x: 50, y: _constants2.default.CURVE_SIZE / 2, type: 'mirrored' }), (0, _makePoint2.default)({ x: 100, y: 0, isLockedX: true })];
62916311

62926312
var deslectAll = function deslectAll(state) {
62936313
var newState = [];
@@ -6356,12 +6376,13 @@ return /******/ (function(modules) { // webpackBootstrap
63566376
var sibHandle = (0, _extends3.default)({}, point[sibHandleName]);
63576377
point[handleName] = handle;
63586378
point[sibHandleName] = sibHandle;
6359-
var wasntSet = handle.angle == null;
6379+
6380+
var wasntSet = handle.angle == null || handle.radius == null;
63606381
var type = point.type;
6361-
if (type !== 'straight' && wasntSet) {
6382+
if (wasntSet) {
63626383
handle.radius = 50;
63636384

6364-
var dy = (sibPoint.y - point.y) / 3.58;
6385+
var dy = (sibPoint.y - point.y) / _constants2.default.CURVE_PERCENT;
63656386
var dx = sibPoint.x - point.x;
63666387
var angle = Math.atan(dy / dx) * (180 / Math.PI) - 90;
63676388
if (dx > 0) {
@@ -9991,16 +10012,21 @@ return /******/ (function(modules) { // webpackBootstrap
999110012

999210013
/***/ },
999310014
/* 107 */
9994-
/***/ function(module, exports) {
10015+
/***/ function(module, exports, __webpack_require__) {
999510016

9996-
"use strict";
10017+
'use strict';
999710018

999810019
Object.defineProperty(exports, "__esModule", {
999910020
value: true
1000010021
});
1000110022

10023+
var _constants = __webpack_require__(139);
1000210024

10003-
var Y_SIZE = 358;
10025+
var _constants2 = _interopRequireDefault(_constants);
10026+
10027+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10028+
10029+
var Y_SIZE = _constants2.default.CURVE_SIZE;
1000410030
var mod = function mod(tempResize_top) {
1000510031
var coef = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
1000610032

@@ -10642,6 +10668,23 @@ return /******/ (function(modules) { // webpackBootstrap
1064210668
// exports
1064310669

1064410670

10671+
/***/ },
10672+
/* 139 */
10673+
/***/ function(module, exports) {
10674+
10675+
"use strict";
10676+
10677+
Object.defineProperty(exports, "__esModule", {
10678+
value: true
10679+
});
10680+
10681+
var CURVE_SIZE = 358;
10682+
exports.default = {
10683+
CURVE_SIZE: CURVE_SIZE,
10684+
CURVE_PERCENT: CURVE_SIZE / 100,
10685+
CURVE_PADDING: 10
10686+
};
10687+
1064510688
/***/ }
1064610689
/******/ ])
1064710690
});

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

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

‎app/js/constants.babel.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
const CURVE_SIZE = 358;
3+
export default {
4+
CURVE_SIZE,
5+
CURVE_PERCENT: CURVE_SIZE/100,
6+
CURVE_PADDING: 10
7+
}

‎app/js/helpers/resize-mod.babel.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11

22

3-
const Y_SIZE = 358;
3+
import C from '../constants';
4+
5+
const Y_SIZE = C.CURVE_SIZE;
46
const mod = ( tempResize_top, coef = 1 ) => {
57
const MOD = Math.abs(tempResize_top % Y_SIZE),
68
DIV = parseInt(tempResize_top / Y_SIZE),

‎app/js/reducers/points-reducer.babel.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import makePoint from '../helpers/make-point';
2+
import C from '../constants';
23

34
const INITIAL_STATE = [
4-
makePoint({ x: 0, y: 358, isLockedX: true }),
5-
makePoint({ x: 50, y: 179, type: 'mirrored' }),
5+
makePoint({ x: 0, y: C.CURVE_SIZE, isLockedX: true }),
6+
makePoint({ x: 50, y: C.CURVE_SIZE/2, type: 'mirrored' }),
67
makePoint({ x: 100, y: 0, isLockedX: true })
78
];
89

@@ -69,12 +70,13 @@ const pointsReducer = (state = INITIAL_STATE, action) => {
6970
const sibHandle = { ...point[sibHandleName] };
7071
point[handleName] = handle;
7172
point[sibHandleName] = sibHandle;
72-
const wasntSet = handle.angle == null;
73+
74+
const wasntSet = handle.angle == null || handle.radius == null;
7375
const type = point.type;
74-
if ( type !== 'straight' && wasntSet ) {
76+
if ( wasntSet ) {
7577
handle.radius = 50;
7678

77-
const dy = (sibPoint.y - point.y) / 3.58;
79+
const dy = (sibPoint.y - point.y) / C.CURVE_PERCENT;
7880
const dx = sibPoint.x - point.x;
7981
let angle = Math.atan( dy/dx ) * (180/Math.PI) - 90;
8082
if ( dx > 0 ) { angle = angle - 180 };

‎app/js/reducers/resize-reducer.babel.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import C from '../constants';
12

23
const INITIAL_STATE = {
34
translate: { x: 150, y: 100 },
@@ -9,7 +10,7 @@ const INITIAL_STATE = {
910

1011
bottom: 0,
1112
temp_bottom: 0,
12-
scalerX: 3.58
13+
scalerX: C.CURVE_PERCENT
1314
}
1415

1516
const resizeReducer = (state = INITIAL_STATE, action) => {
@@ -22,7 +23,7 @@ const resizeReducer = (state = INITIAL_STATE, action) => {
2223
const newState = { ...state, [`temp_${type}`]: delta };
2324
// if `right`size changed - calculate the scaler for x axis
2425
if ( type === 'right' ) {
25-
newState[ 'scalerX' ] = (358 + Math.max( state.right + delta, 0 ))/100;
26+
newState[ 'scalerX' ] = (C.CURVE_SIZE + Math.max( state.right + delta, 0 ))/100;
2627
}
2728
return newState;
2829
}

‎app/js/tags/curve-editor.tag

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ require('./point-controls');
3535
require('../../css/blocks/curve-editor');
3636
this.CLASSES = require('../../css/blocks/curve-editor.postcss.css.json');
3737

38+
import C from '../constants';
39+
3840
const {store} = opts;
3941
store.subscribe(this.update.bind(this));
4042

@@ -87,8 +89,8 @@ require('./point-controls');
8789
temp_bottom += state.bottom;
8890
temp_right += state.right;
8991

90-
const X_SIZE = 411;
91-
const Y_SIZE = 378;
92+
const X_SIZE = C.CURVE_SIZE + 53;
93+
const Y_SIZE = C.CURVE_SIZE + 2*C.CURVE_PADDING;
9294

9395
// constrain min height
9496
if (Y_SIZE - temp_top < Y_SIZE) { temp_top = 0; }

‎app/js/tags/curve.tag

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,16 @@ require('./point');
5656

5757
import store from '../store';
5858
import mod from '../helpers/resize-mod';
59+
import C from '../constants';
5960

6061
const getPath = () => {
6162
let str = '';
6263
for (let i = 0 ; i < this.points.length; i++) {
6364
const point = this.points[i],
6465
x = point.x + point.tempX,
6566
y = point.y + point.tempY;
66-
if ( i === 0) { str += `M${x}, ${y/3.58} `; }
67-
else { str += `L${x}, ${y/3.58} ` ; }
67+
if ( i === 0) { str += `M${x}, ${y/C.CURVE_PERCENT} `; }
68+
else { str += `L${x}, ${y/C.CURVE_PERCENT} ` ; }
6869
}
6970
this.path = str;
7071
}
@@ -75,7 +76,7 @@ require('./point');
7576

7677
temp_top += resize.top;
7778

78-
if (358 - temp_top < 358) { temp_top = 0; }
79+
if (C.CURVE_SIZE - temp_top < C.CURVE_SIZE) { temp_top = 0; }
7980
temp_top = mod( temp_top, -1 );
8081

8182
const background = `background-position: 0 ${-temp_top - 1}px`;
@@ -100,7 +101,7 @@ require('./point');
100101
// const startChar = (i === 1) ? 'M' : 'L'
101102
this.segments.push({
102103
index: i,
103-
string: `M${px}, ${py/3.58} L${x}, ${y/3.58}`
104+
string: `M${px}, ${py/C.CURVE_PERCENT} L${x}, ${y/C.CURVE_PERCENT}`
104105
});
105106
}
106107
}
@@ -127,7 +128,7 @@ require('./point');
127128
if ( target.tagName.toLowerCase() !== 'path' ) { return; }
128129
// coordinates
129130
const x = ev.offsetX,
130-
y = ev.offsetY*3.58,
131+
y = ev.offsetY*C.CURVE_PERCENT,
131132
index = parseInt(target.getAttribute('data-index'));
132133

133134
store.dispatch({

‎app/js/tags/point.tag

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ require('./little-handle');
1313
require('../../css/blocks/point');
1414

1515
import store from '../store';
16+
import C from '../constants';
1617
const {clamp} = mojs.h;
1718

1819
this.getHandles = () => {
@@ -71,7 +72,7 @@ require('./little-handle');
7172
const {resize} = store.getState();
7273
const y = this.point.y + e.deltaY
7374
// clamp y to the size of curve
74-
return clamp( y, resize.top, 358 + resize.bottom );
75+
return clamp( y, resize.top, C.CURVE_SIZE + resize.bottom );
7576
}
7677

7778
// get y delta reagarding curve bounds
@@ -80,7 +81,7 @@ require('./little-handle');
8081
y = this.point.y + e.deltaY;
8182

8283
if ( y < resize.top ) { return (resize.top - this.point.y); }
83-
if ( y > 358 + resize.bottom ) { return 358 + resize.bottom - this.point.y }
84+
if ( y > C.CURVE_SIZE + resize.bottom ) { return C.CURVE_SIZE + resize.bottom - this.point.y }
8485
return e.deltaY;
8586
}
8687

0 commit comments

Comments
 (0)