Skip to content

Commit d643534

Browse files
legomushroomlegomushroom
committed
curve-editor: add entire path rendering
1 parent cbec1a0 commit d643534

File tree

7 files changed

+117
-87
lines changed

7 files changed

+117
-87
lines changed

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

Lines changed: 67 additions & 40 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 = "3082a6b3aa4ce9ad3025"; // eslint-disable-line no-unused-vars
78+
/******/ var hotCurrentHash = "4180f42de19836a486f4"; // eslint-disable-line no-unused-vars
7979
/******/ var hotCurrentModuleData = {};
8080
/******/ var hotCurrentParents = []; // eslint-disable-line no-unused-vars
8181
/******/
@@ -3798,7 +3798,7 @@ return /******/ (function(modules) { // webpackBootstrap
37983798
/* WEBPACK VAR INJECTION */(function(riot) {
37993799
__webpack_require__(13);
38003800

3801-
riot.tag2('curve', '<div class="{this.CLASSES[\'curve__svg-wrapper\']}" riot-style="{this.styles.transform}"> <point each="{point, _index in points}" points-count="{parent.points.length}"></point> <svg height="358" viewbox="0 0 100 100" preserveaspectratio="none" class="{this.CLASSES[\'curve__svg\']}"> <path riot-d="{this.path}" stroke="#000000" stroke-opacity="0.35" stroke-width="4" vector-effect="non-scaling-stroke" transform="translate(.75,.75)" fill="none"></path> <g id="js-segments"> <path each="{this.segments}" riot-d="{string}" data-index="{index}" stroke="white" stroke-width="" vector-effect="non-scaling-stroke" class="{this.CLASSES[\'curve__svg-segment\']}"></path> </g> </svg> </div>', '', 'class="{this.CLASSES[\'curve\']}" riot-style="{this.styles.background}"', function(opts) {
3801+
riot.tag2('curve', '<div class="{this.CLASSES[\'curve__svg-wrapper\']}" riot-style="{this.styles.transform}"> <point each="{point, _index in points}" points-count="{parent.points.length}"></point> <svg height="358" viewbox="0 0 100 100" preserveaspectratio="none" class="{this.CLASSES[\'curve__svg\']}"> <path riot-d="{this.path}" stroke="#000000" stroke-opacity="1.35" stroke-width="4" vector-effect="non-scaling-stroke" transform="translate(.75,.75)" fill="none"></path> <g id="js-segments"> <path each="{this.segments}" riot-d="{string}" data-index="{index}" stroke="white" stroke-width="" vector-effect="non-scaling-stroke" class="{this.CLASSES[\'curve__svg-segment\']}"></path> </g> </svg> </div>', '', 'class="{this.CLASSES[\'curve\']}" riot-style="{this.styles.background}"', function(opts) {
38023802
'use strict';
38033803

38043804
var _this = this;
@@ -3815,6 +3815,10 @@ return /******/ (function(modules) { // webpackBootstrap
38153815

38163816
var _constants2 = _interopRequireDefault(_constants);
38173817

3818+
var _angleToPoint = __webpack_require__(140);
3819+
3820+
var _angleToPoint2 = _interopRequireDefault(_angleToPoint);
3821+
38183822
var _hammerjs = __webpack_require__(102);
38193823

38203824
var _hammerjs2 = _interopRequireDefault(_hammerjs);
@@ -3828,44 +3832,53 @@ return /******/ (function(modules) { // webpackBootstrap
38283832
this.CLASSES = __webpack_require__(111);
38293833
__webpack_require__(112);
38303834

3831-
var angleToPoint = function angleToPoint(angle, radius) {
3832-
return mojs.h.getRadialPoint({ angle: angle, radius: radius, center: { x: 0, y: 0 } });
3835+
var getPoint = function getPoint(point) {
3836+
var handleIndex = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
3837+
3838+
var x = point.x + point.tempX,
3839+
y = point.y + point.tempY,
3840+
handle = point['handle' + handleIndex];
3841+
3842+
var CHAR = handleIndex === 2 ? 'C' : '';
3843+
if (point.type !== 'straight') {
3844+
var handleCoords = (0, _angleToPoint2.default)(handle.angle, handle.radius);
3845+
return '' + CHAR + (x + handleCoords.x / _constants2.default.CURVE_PERCENT) + ', ' + (y + handleCoords.y) / _constants2.default.CURVE_PERCENT + ' ';
3846+
} else {
3847+
return '' + CHAR + x + ', ' + y / _constants2.default.CURVE_PERCENT + ' ';
3848+
}
38333849
};
38343850

3835-
var getPath = function getPath() {
3851+
var getSegment = function getSegment(point, nextPoint, i) {
3852+
if (!nextPoint) {
3853+
return 1;
3854+
}
3855+
38363856
var str = '';
3837-
for (var i = 0; i < _this.points.length; i++) {
3838-
var point = _this.points[i],
3839-
x = point.x + point.tempX,
3840-
y = point.y + point.tempY;
38413857

3842-
if (i === 0) {
3843-
var nextPoint = _this.points[i + 1];
3844-
var xNext = nextPoint.x + nextPoint.tempX,
3845-
yNext = nextPoint.y + nextPoint.tempY;
3858+
var x = point.x + point.tempX,
3859+
y = point.y + point.tempY,
3860+
xNext = nextPoint.x + nextPoint.tempX,
3861+
yNext = nextPoint.y + nextPoint.tempY;
38463862

3847-
str += 'M' + x + ', ' + y / _constants2.default.CURVE_PERCENT + ' ';
3848-
if (point.type !== 'straight') {
3849-
var handle2 = angleToPoint(point.handle2.angle, point.handle2.radius);
3850-
str += 'C' + (point.x + handle2.x) + ', ' + (point.y / 3.58 + handle2.y / 3.58) + ' ';
3851-
} else {
3852-
str += 'C' + point.x + ', ' + point.y / 3.58 + ' ';
3853-
}
3863+
if (i === 0) {
3864+
str += 'M' + x + ', ' + y / _constants2.default.CURVE_PERCENT + ' ';
3865+
}
3866+
str += getPoint(point, 2);
3867+
str += getPoint(nextPoint, 1);
3868+
str += xNext + ', ' + yNext / _constants2.default.CURVE_PERCENT + ' ';
38543869

3855-
if (nextPoint.type !== 'straight') {
3856-
var handle1 = angleToPoint(nextPoint.handle1.angle, nextPoint.handle1.radius);
3857-
str += nextPoint.x + handle1.x + ', ' + (nextPoint.y / 3.58 + handle1.y / 3.58) + ' ';
3858-
} else {
3859-
str += nextPoint.x + ', ' + nextPoint.y / 3.58 + ' ';
3860-
}
3870+
return str;
3871+
};
38613872

3862-
str += nextPoint.x + ', ' + nextPoint.y / 3.58 + ' ';
3863-
} else {}
3864-
// str += `L${x}, ${y/C.CURVE_PERCENT} ` ;
3873+
var getPath = function getPath() {
3874+
var str = '';
3875+
for (var i = 0; i < _this.points.length - 1; i++) {
3876+
var point = _this.points[i],
3877+
nextPoint = _this.points[i + 1];
38653878

3866-
// if ( i === 0) { str += `M${x}, ${y/C.CURVE_PERCENT} `; }
3867-
// else { str += `L${x}, ${y/C.CURVE_PERCENT} ` ; }
3879+
str += getSegment(point, nextPoint, i);
38683880
}
3881+
38693882
_this.path = str;
38703883
};
38713884

@@ -4132,6 +4145,10 @@ return /******/ (function(modules) { // webpackBootstrap
41324145

41334146
var _store2 = _interopRequireDefault(_store);
41344147

4148+
var _angleToPoint = __webpack_require__(140);
4149+
4150+
var _angleToPoint2 = _interopRequireDefault(_angleToPoint);
4151+
41354152
var _hammerjs = __webpack_require__(102);
41364153

41374154
var _hammerjs2 = _interopRequireDefault(_hammerjs);
@@ -4149,10 +4166,6 @@ return /******/ (function(modules) { // webpackBootstrap
41494166
_this.update();
41504167
});
41514168

4152-
var angleToPoint = function angleToPoint(angle, radius) {
4153-
return mojs.h.getRadialPoint({ angle: angle, radius: radius, center: { x: 0, y: 0 } });
4154-
};
4155-
41564169
var anglePointToAngle = function anglePointToAngle(x, y) {
41574170
var radius = Math.sqrt(x * x + y * y),
41584171
angle = Math.atan(y / x) * (180 / Math.PI) - 90;
@@ -4164,22 +4177,22 @@ return /******/ (function(modules) { // webpackBootstrap
41644177
};
41654178

41664179
this.getPointStyle = function () {
4167-
var point = angleToPoint(_this.angle, _this.radius);
4180+
var point = (0, _angleToPoint2.default)(_this.angle, _this.radius);
41684181

41694182
var translate = 'transform: translate(' + point.x + 'px, ' + point.y + 'px) rotate(' + _this.angle + 'deg)';
41704183
return '' + mojs.h.prefix.css + translate + '; ' + translate;
41714184
};
41724185

41734186
this.getLineStyle = function () {
4174-
var point = angleToPoint(_this.angle, _this.radius);
4187+
var point = (0, _angleToPoint2.default)(_this.angle, _this.radius);
41754188

41764189
var translate = 'transform: rotate(' + _this.angle + 'deg) scaleY(' + _this.radius + ')';
41774190
return '' + mojs.h.prefix.css + translate + '; ' + translate;
41784191
};
41794192

41804193
this.on('mount', function () {
41814194
var hammertime = (0, _propagatingHammerjs2.default)(new _hammerjs2.default(_this.root)).on('pan', function (e) {
4182-
var point = angleToPoint(_this.angle, _this.radius),
4195+
var point = (0, _angleToPoint2.default)(_this.angle, _this.radius),
41834196
newX = point.x + e.deltaX,
41844197
newY = point.y + e.deltaY;
41854198

@@ -6333,7 +6346,7 @@ return /******/ (function(modules) { // webpackBootstrap
63336346

63346347
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
63356348

6336-
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 })];
6349+
var INITIAL_STATE = [(0, _makePoint2.default)({ x: 0, y: _constants2.default.CURVE_SIZE, isLockedX: true, type: 'straight' }), (0, _makePoint2.default)({ x: 50, y: _constants2.default.CURVE_SIZE / 2, type: 'mirrored' }), (0, _makePoint2.default)({ x: 100, y: 0, isLockedX: true })];
63376350

63386351
var deslectAll = function deslectAll(state) {
63396352
var newState = [];
@@ -10528,8 +10541,8 @@ return /******/ (function(modules) { // webpackBootstrap
1052810541
var state = _store2.default.getState().pointControls.present;
1052910542
_this.buttons = {
1053010543
'straight': false,
10531-
'mirrored': false,
1053210544
'disconnected': false,
10545+
'mirrored': false,
1053310546
'asymmetric': false
1053410547
};
1053510548
_this.buttons[state.type || 'straight'] = true;
@@ -10711,6 +10724,20 @@ return /******/ (function(modules) { // webpackBootstrap
1071110724
CURVE_PADDING: 10
1071210725
};
1071310726

10727+
/***/ },
10728+
/* 140 */
10729+
/***/ function(module, exports) {
10730+
10731+
"use strict";
10732+
10733+
Object.defineProperty(exports, "__esModule", {
10734+
value: true
10735+
});
10736+
10737+
exports.default = function (angle, radius) {
10738+
return mojs.h.getRadialPoint({ angle: angle, radius: radius, center: { x: 0, y: 0 } });
10739+
};
10740+
1071410741
/***/ }
1071510742
/******/ ])
1071610743
});

‎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/helpers/angle-to-point.babel.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default (angle, radius) => {
2+
return mojs.h.getRadialPoint({ angle, radius, center: { x: 0, y: 0 } })
3+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import makePoint from '../helpers/make-point';
22
import C from '../constants';
33

44
const INITIAL_STATE = [
5-
makePoint({ x: 0, y: C.CURVE_SIZE, isLockedX: true }),
5+
makePoint({ x: 0, y: C.CURVE_SIZE, isLockedX: true, type: 'straight' }),
66
makePoint({ x: 50, y: C.CURVE_SIZE/2, type: 'mirrored' }),
77
makePoint({ x: 100, y: 0, isLockedX: true })
88
];

‎app/js/tags/curve.tag

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ require('./point');
1515

1616
<path d={this.path}
1717
stroke="#000000"
18-
stroke-opacity="0.35"
18+
stroke-opacity="1.35"
1919
stroke-width="4"
2020
vector-effect="non-scaling-stroke"
2121
transform="translate(.75,.75)"
@@ -57,47 +57,50 @@ require('./point');
5757
import store from '../store';
5858
import mod from '../helpers/resize-mod';
5959
import C from '../constants';
60+
import angleToPoint from '../helpers/angle-to-point';
6061

61-
const angleToPoint = (angle, radius) => {
62-
return mojs.h.getRadialPoint({ angle, radius, center: { x: 0, y: 0 } })
62+
63+
const getPoint = (point, handleIndex = 1) => {
64+
const x = point.x + point.tempX,
65+
y = point.y + point.tempY,
66+
handle = point[`handle${handleIndex}`];
67+
68+
const CHAR = ( handleIndex === 2 ) ? 'C' : '';
69+
if ( point.type !== 'straight' ) {
70+
const handleCoords = angleToPoint( handle.angle, handle.radius );
71+
return `${CHAR}${x + handleCoords.x/C.CURVE_PERCENT}, ${(y + handleCoords.y)/C.CURVE_PERCENT} `;
72+
} else {
73+
return `${CHAR}${x}, ${y/C.CURVE_PERCENT} `;
74+
}
75+
}
76+
77+
const getSegment = (point, nextPoint, i) => {
78+
if ( !nextPoint ) { return 1; }
79+
80+
let str = '';
81+
82+
const x = point.x + point.tempX,
83+
y = point.y + point.tempY,
84+
xNext = nextPoint.x + nextPoint.tempX,
85+
yNext = nextPoint.y + nextPoint.tempY;
86+
87+
if ( i === 0 ) { str += `M${x}, ${y/C.CURVE_PERCENT} ` }
88+
str += getPoint( point, 2 );
89+
str += getPoint( nextPoint, 1 );
90+
str += `${xNext}, ${yNext/C.CURVE_PERCENT} `;
91+
92+
return str;
6393
}
6494

6595
const getPath = () => {
6696
let str = '';
67-
for (let i = 0 ; i < this.points.length; i++) {
68-
const point = this.points[i],
69-
x = point.x + point.tempX,
70-
y = point.y + point.tempY;
71-
72-
if ( i === 0 ) {
73-
const nextPoint = this.points[i+1];
74-
const xNext = nextPoint.x + nextPoint.tempX,
75-
yNext = nextPoint.y + nextPoint.tempY;
76-
77-
str += `M${x}, ${y/C.CURVE_PERCENT} `;
78-
if ( point.type !== 'straight' ) {
79-
const handle2 = angleToPoint( point.handle2.angle, point.handle2.radius );
80-
str += `C${point.x + handle2.x}, ${point.y/3.58 + handle2.y/3.58} `;
81-
} else {
82-
str += `C${point.x}, ${point.y/3.58} `;
83-
}
84-
85-
if ( nextPoint.type !== 'straight' ) {
86-
const handle1 = angleToPoint( nextPoint.handle1.angle, nextPoint.handle1.radius );
87-
str += `${nextPoint.x + handle1.x}, ${nextPoint.y/3.58 + handle1.y/3.58} `;
88-
} else {
89-
str += `${nextPoint.x}, ${nextPoint.y/3.58} `;
90-
}
91-
92-
str += `${nextPoint.x}, ${nextPoint.y/3.58} `;
93-
94-
} else {
95-
// str += `L${x}, ${y/C.CURVE_PERCENT} ` ;
96-
}
97-
98-
// if ( i === 0) { str += `M${x}, ${y/C.CURVE_PERCENT} `; }
99-
// else { str += `L${x}, ${y/C.CURVE_PERCENT} ` ; }
97+
for (let i = 0 ; i < this.points.length-1; i++) {
98+
const point = this.points[i],
99+
nextPoint = this.points[i+1];
100+
101+
str += getSegment( point, nextPoint, i );
100102
}
103+
101104
this.path = str;
102105
}
103106

‎app/js/tags/little-handle.tag

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,9 @@
1515
this.CLASSES = require('../../css/blocks/little-handle.postcss.css.json');
1616
require('../../css/blocks/little-handle');
1717
import store from '../store';
18+
import angleToPoint from '../helpers/angle-to-point';
1819
store.subscribe(() => { this.update(); });
1920

20-
const angleToPoint = (angle, radius) => {
21-
return mojs.h.getRadialPoint({ angle, radius, center: { x: 0, y: 0 } })
22-
}
23-
2421
const anglePointToAngle = (x, y) => {
2522
let radius = Math.sqrt( x*x + y*y ),
2623
angle = Math.atan( y/x ) * (180/Math.PI) - 90;

‎app/js/tags/point-controls.tag

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ require('./icon-button');
2020
const state = store.getState().pointControls.present;
2121
this.buttons = {
2222
'straight': false,
23-
'mirrored': false,
2423
'disconnected': false,
24+
'mirrored': false,
2525
'asymmetric': false,
2626
}
2727
this.buttons[state.type || 'straight'] = true;

0 commit comments

Comments
 (0)