Skip to content

Commit c8aeb14

Browse files
legomushroomlegomushroom
committed
little-handle: add mirrored, straight, asymmetric, disconnected functionality
1 parent a977bde commit c8aeb14

11 files changed

+519
-410
lines changed

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

Lines changed: 412 additions & 359 deletions
Large diffs are not rendered by default.

‎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/css/blocks/little-handle.postcss.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
top: 50%;
4242
background: $c-orange;
4343
transform-origin: 50% 100%;
44-
box-shadow: calc( 1*$PX ) 0 0 rgba(0,0,0,.5);
44+
/*box-shadow: calc( 1*$PX ) 0 0 rgba(0,0,0,.5);*/
4545
}
4646

4747
}

‎app/css/blocks/little-handle.postcss.css.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"little-handle":"_little-handle_1rkhn_3","little-handle__point":"_little-handle__point_1rkhn_1","little-handle__line":"_little-handle__line_1rkhn_1"}
1+
{"little-handle":"_little-handle_iw2ru_3","little-handle__point":"_little-handle__point_iw2ru_1","little-handle__line":"_little-handle__line_iw2ru_1"}

‎app/js/helpers/make-point.babel.js

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,8 @@ const makeHandlePoint = (o={}) => {
88
return {
99
index: fallback( o.index, 0 ),
1010
// coordinates
11-
angle: fallback( o.angle, -45 ),
12-
radius: fallback( o.radius, 25 ),
13-
// temporary coordinates (when user moves the point) -
14-
// should not be in history
15-
tempAngle: fallback( o.tempAngle, 0 ),
16-
tempRadius: fallback( o.tempRadius, 0 ),
11+
angle: fallback( o.angle, null ),
12+
radius: fallback( o.radius, null ),
1713
// state
1814
isTouched: fallback( o.isTouched, false ),
1915
isSelected: fallback( o.isSelected, false ),

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

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,35 @@ const pointsReducer = (state = INITIAL_STATE, action) => {
5656
// if should de select all other points
5757
newState = (isDeselect) ? deslectAll( state ) : [ ...state ];
5858

59-
newState[index].isSelected = true;
59+
const point = newState[index];
60+
const sibPoint = (index === newState.length-1)
61+
? newState[index-1] : newState[index+1];
62+
63+
const handleIndex = (index === newState.length-1) ? 1 : 2;
64+
65+
const handleName = `handle${handleIndex}`;
66+
const sibHandleIndex = (handleIndex === 1) ? 2 : 1;
67+
const sibHandleName = `handle${sibHandleIndex}`;
68+
const handle = { ...point[handleName] };
69+
const sibHandle = { ...point[sibHandleName] };
70+
point[handleName] = handle;
71+
point[sibHandleName] = sibHandle;
72+
const wasntSet = handle.angle == null;
73+
const type = point.type;
74+
if ( type !== 'straight' && wasntSet ) {
75+
handle.radius = 50;
76+
77+
const dy = (sibPoint.y - point.y) / 3.58;
78+
const dx = sibPoint.x - point.x;
79+
let angle = Math.atan( dy/dx ) * (180/Math.PI) - 90;
80+
if ( dx > 0 ) { angle = angle - 180 };
81+
handle.angle = angle;
82+
83+
sibHandle.radius = handle.radius;
84+
sibHandle.angle = handle.angle - 180;
85+
}
86+
87+
point.isSelected = true;
6088
return newState;
6189
}
6290

@@ -90,10 +118,32 @@ const pointsReducer = (state = INITIAL_STATE, action) => {
90118
const newState = [];
91119
for (var i = 0; i < state.length; i++) {
92120
const item = state[i];
121+
const type = action.data;
93122
// copy all items from previous state
94123
newState.push( { ...item } );
95124
// if item was selected - set the new `type`
96-
( selected.indexOf(i) !== -1 ) && (newState[i].type = action.data);
125+
( selected.indexOf(i) !== -1 ) && (newState[i].type = type);
126+
127+
128+
const index = i;
129+
const point = newState[index];
130+
const sibPoint = (index === newState.length-1)
131+
? newState[index-1] : newState[index+1];
132+
133+
const handleIndex = (index === newState.length-1) ? 1 : 2;
134+
const sibHandleIndex = (handleIndex === 1) ? 2 : 1;
135+
const handleName = `handle${handleIndex}`;
136+
const sibHandleName = `handle${sibHandleIndex}`;
137+
const handle = { ...point[handleName] };
138+
const sibHandle = { ...point[sibHandleName] };
139+
point[handleName] = handle;
140+
point[sibHandleName] = sibHandle;
141+
142+
if ( type === 'mirrored' || type === 'asymmetric' ) {
143+
sibHandle.angle = handle.angle - 180;
144+
if ( type === 'mirrored' ) { sibHandle.radius = handle.radius; }
145+
}
146+
97147
}
98148

99149
return newState;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ require('./point-controls');
1616
<code-panel />
1717
<icons />
1818
<div class={this.CLASSES['curve-editor__left']}>
19-
<icon-button shape="code"></icon-button>
19+
<icon-button shape="code" title="show code"></icon-button>
2020
<icon-divider />
2121
<point-controls className={this.CLASSES['curve-editor__anchor-buttons']} />
2222
<a href="https://github.com/legomushroom/mojs-curve-editor" target="_blank" class={this.CLASSES['curve-editor__mojs-logo']}>

‎app/js/tags/curve.tag

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ require('./point');
44
<curve class={ this.CLASSES['curve']} style={this.styles.background}>
55
<div class={ this.CLASSES['curve__svg-wrapper']} style={this.styles.transform}>
66

7-
<point each={ point, _index in points }></point>
7+
<point
8+
each={ point, _index in points }
9+
points-count={parent.points.length} />
810

911
<svg height="358"
1012
viewBox="0 0 100 100"

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

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@
1515
this.CLASSES = require('../../css/blocks/little-handle.postcss.css.json');
1616
require('../../css/blocks/little-handle');
1717
import store from '../store';
18-
store.subscribe(() => {
19-
this.update();
20-
});
18+
store.subscribe(() => { this.update(); });
2119

2220
const angleToPoint = (angle, radius) => {
2321
return mojs.h.getRadialPoint({ angle, radius, center: { x: 0, y: 0 } })
@@ -54,45 +52,45 @@
5452
newX = point.x + e.deltaX,
5553
newY = point.y + e.deltaY;
5654

55+
const angle = anglePointToAngle( newX, newY );
5756
store.dispatch({
5857
type: 'HANDLE_TRANSLATE',
5958
data: {
6059
index: this.index,
6160
parentIndex: this.opts.parentIndex,
62-
...anglePointToAngle( newX, newY )
61+
...angle
6362
}
6463
});
6564

66-
e.stopPropagation();
67-
})
68-
.on('panend', (e) => {
69-
// // reset temporary deltas
70-
// store.dispatch({ type: 'POINT_TRANSLATE', data: { x: 0, y: 0, index: this._index } });
71-
// // fire translate end and save it to the store
72-
// store.dispatch({
73-
// type: 'POINT_TRANSLATE_END',
74-
// data: {
75-
// x: this.point.x + getTempX(e),
76-
// y: getY(e),
77-
// index: this._index
78-
// },
79-
// isRecord: true
80-
// });
65+
if ( this.opts.type === 'mirrored' ) {
66+
const index = (this.index === 1) ? 2 : 1;
67+
store.dispatch({
68+
type: 'HANDLE_TRANSLATE',
69+
data: {
70+
index,
71+
parentIndex: this.opts.parentIndex,
72+
radius: angle.radius,
73+
angle: angle.angle - 180
74+
}
75+
});
76+
}
77+
78+
if ( this.opts.type === 'asymmetric' ) {
79+
const index = (this.index === 1) ? 2 : 1;
80+
store.dispatch({
81+
type: 'HANDLE_TRANSLATE',
82+
data: {
83+
index,
84+
parentIndex: this.opts.parentIndex,
85+
angle: angle.angle - 180,
86+
radius: this.radius
87+
}
88+
});
89+
}
8190

8291
e.stopPropagation();
8392
})
84-
// .on('tap', (e) => {
85-
// store.dispatch({
86-
// type: 'POINT_SELECT',
87-
// data: {
88-
// index: this._index,
89-
// type: this.point.type,
90-
// isDeselect: !e.srcEvent.shiftKey
91-
// }
92-
93-
// });
94-
// e.stopPropagation();
95-
// });
93+
.on('panend', (e) => { e.stopPropagation(); });
9694
});
9795

9896
</script>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ require('./icon-button');
77
is-check={value}
88
shape={ 'point-' + name }
99
on-tap={ parent.onButtonTap.bind(this) }
10+
title={name}
1011
/>
1112

1213
<script type="babel">

0 commit comments

Comments
 (0)