Skip to content

Commit 2c6070b

Browse files
legomushroomlegomushroom
committed
little-handle: now uses absolute vector to describe position
1 parent 294052e commit 2c6070b

24 files changed

+3364
-2702
lines changed

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

Lines changed: 2984 additions & 2612 deletions
Large diffs are not rendered by default.

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

Lines changed: 6 additions & 6 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: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,17 @@
1919
margin-top: calc( -$size/2 * $PX);
2020
background: $c-orange;
2121
box-shadow: calc( 1*$PX ) calc( 1*$PX ) 0 rgba(0,0,0,.5);
22-
&:after {
23-
content: '';
24-
position: absolute;
25-
width: 200%;
26-
height: 200%;
27-
left: 50%;
28-
top: 50%;
29-
margin-left: -100%;
30-
margin-top: -100%;
31-
}
22+
}
23+
24+
&__easy-touch {
25+
position: absolute;
26+
z-index: 1;
27+
width: 200%;
28+
height: 200%;
29+
left: 50%;
30+
top: 50%;
31+
margin-left: -100%;
32+
margin-top: -100%;
3233
}
3334

3435
&__line {

‎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_iw2ru_3","little-handle__point":"_little-handle__point_iw2ru_1","little-handle__line":"_little-handle__line_iw2ru_1"}
1+
{"little-handle":"_little-handle_x1mg1_3","little-handle__point":"_little-handle__point_x1mg1_1","little-handle__easy-touch":"_little-handle__easy-touch_x1mg1_1","little-handle__line":"_little-handle__line_x1mg1_1"}

‎app/css/blocks/point.postcss.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ $size: 10;
1313
border-radius: 50%;
1414
z-index: 3;
1515
box-shadow: calc(3*$PX) calc(3*$PX) 0 rgba(0,0,0,.5);
16-
border: calc( 2*$PX ) solid $c-white;
16+
/*border: calc( 2*$PX ) solid $c-white;*/
1717

1818
&__touch {
1919
position: absolute;
@@ -30,7 +30,8 @@ $size: 10;
3030
&:hover,
3131
&.is-selected {
3232
/*border-color: #8C6D8B;*/
33-
border-color: $c-orange;
33+
/*border-color: $c-orange;*/
34+
background: $c-orange;
3435
}
3536

3637
&.is-selected {

‎app/css/blocks/point.postcss.css.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"point":"_point_17pb1_5","point__touch":"_point__touch_17pb1_1","is-selected":"_is-selected_17pb1_31","is-hide-handles":"_is-hide-handles_17pb1_42"}
1+
{"point":"_point_14jnp_5","point__touch":"_point__touch_14jnp_1","is-selected":"_is-selected_14jnp_31","is-hide-handles":"_is-hide-handles_14jnp_43"}

‎app/css/blocks/progress-line.postcss.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import '../assets/globals.postcss.css';
2+
3+
.progress-line {
4+
position: absolute;
5+
top: 0;
6+
bottom: 0;
7+
width: calc( 1*$PX );
8+
margin-left: calc( -1.5*$PX );
9+
}

‎app/css/blocks/progress-line.postcss.css.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"progress-line":"_progress-line_1j4pp_3"}

‎app/index.html

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,67 @@
66
</head>
77
<body>
88

9-
<!-- <curve-editor></curve-editor> -->
9+
<div class="el" id="js-el"></div>
10+
<style>
11+
.el {
12+
position: absolute;
13+
left: 10%;
14+
top: 50%;
15+
width: 100px;
16+
height: 100px;
17+
margin-left: -50px;
18+
margin-top: -50px;
19+
background: #572B53;
20+
border-radius: 3px;
21+
}
22+
</style>
1023

11-
<script src="/node_modules/mo-js/build/mo.js" charset="utf-8"></script>
24+
<script src="../node_modules/mo-js/build/mo.js" charset="utf-8"></script>
25+
<script src="../node_modules/mojs-player/build/mojs-player.js" charset="utf-8"></script>
1226
<script src="build/mojs-curve-editor.js" charset="utf-8"></script>
1327

1428
<script>
15-
new window.MojsCurveEditor;
29+
var curveEditor = new window.MojsCurveEditor({ name: 'curve1', isSaveState: false });
30+
var curveEditor2 = new window.MojsCurveEditor({ name: 'curve2', isSaveState: true });
31+
32+
// var shape = new mojs.Shape({
33+
// fill: 'yellow',
34+
// stroke: 'cyan',
35+
// scaleX: { 0: 1 },
36+
// easing: curveEditor.getEasing()
37+
// });
38+
39+
40+
var duration = 500,
41+
shift = 75;
42+
43+
var html = new mojs.Html({
44+
el: '#js-el',
45+
y: { [-shift]: shift, easing: 'cubic.in', duration },
46+
rotateZ: { 0: 90, easing: 'linear.none', duration }
47+
// transformOrigin: '50% 100%',
48+
})
49+
.then({
50+
scaleX: {
51+
1: 1,
52+
curve: curveEditor.getEasing(),
53+
duration: duration
54+
},
55+
scaleY: {
56+
1: 1,
57+
curve: curveEditor.getEasing({ transform: (k) => { return 1 + ( 1-k )/1.5; } }),
58+
duration: duration
59+
},
60+
// transformOrigin: { '50% 50%': '50% 50%', curve: curveEditor2.getEasing() },
61+
y: { to: -shift, easing: 'cubic.out', delay: .75*duration, duration },
62+
rotateZ: { 0: 90, delay: .75*duration, easing: 'linear.none', duration }
63+
})
64+
// .then({
65+
// y: { to: -shift, easing: 'cubic.out' }
66+
// });
67+
68+
var player = new MojsPlayer({ add: html });
69+
1670
</script>
1771

1872
</body>

‎app/js/app.babel.jsx

Lines changed: 98 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import initStore from './store';
77
import C from './constants';
88
import hash from './helpers/hash';
99
import fallbackTo from './helpers/fallback-to';
10+
import defer from './helpers/defer';
1011

1112
// TODO
12-
// - add APIs
13+
// - handle translate isRecord
14+
// - multiple editors short cuts
1315
// - resize down when points are above the editor border
1416
// - instance dropdown on code panel
1517
// - import path data
@@ -20,25 +22,38 @@ class API {
2022
this._o = o;
2123

2224
this._decalareDefaults();
25+
this._extendDefaults();
2326
this._vars();
2427
this._render();
2528
this._tryToRestore();
2629
this._listenUnload();
2730

28-
this._subscribe()
31+
this._subscribe();
2932
}
3033

3134
_decalareDefaults ( ) {
3235
this._defaults = {
33-
name: 'mojs-curve-editor',
34-
isSaveState: true,
36+
name: 'mojs-curve-editor',
37+
isSaveState: true
38+
}
39+
}
40+
41+
42+
_extendDefaults () {
43+
this._props = {};
44+
45+
for (let key in this._defaults) {
46+
this._props[ key ] = fallbackTo( this._o[key], this._defaults[key] );
3547
}
3648
}
3749

3850
_vars () {
3951
this.revision = '1.0.0';
4052
this.store = initStore();
4153

54+
this._easings = [];
55+
this._progressLines = [];
56+
4257
let str = fallbackTo( this._o.name, this._defaults.name );
4358
str += ( str === this._defaults.name ) ? '' : `__${this._defaults.name}`;
4459
this._localStorage = `${str}__${ hash( str ) }`;
@@ -48,32 +63,35 @@ class API {
4863
document.addEventListener('DOMContentLoaded', () => {
4964
render(
5065
<Provider store={this.store}>
51-
<CurveEditor />
66+
<CurveEditor progressLines={this._progressLines} />
5267
</Provider>, document.body);
5368
});
5469
}
5570

5671
_listenUnload () {
5772
const unloadEvent = ('onpagehide' in window) ? 'pagehide' : 'beforeunload';
5873
window.addEventListener( unloadEvent, () => {
59-
60-
const preState = { ...this.store.getState() };
74+
if ( this._props.isSaveState ) {
75+
const preState = { ...this.store.getState() };
6176

62-
delete preState.points.history;
63-
delete preState.pointControls.history;
77+
delete preState.points.history;
78+
delete preState.pointControls.history;
79+
preState.progressLines.lines = [];
6480

65-
localStorage.setItem(this._localStorage, JSON.stringify( preState ) );
81+
localStorage.setItem(this._localStorage, JSON.stringify( preState ) );
82+
} else {
83+
localStorage.removeItem( this._localStorage );
84+
}
6685
});
6786
}
6887

6988
_tryToRestore () {
70-
// localStorage.removeItem(this._localStorage);
7189
const stored = localStorage.getItem(this._localStorage);
7290
if ( stored ) { this.store.dispatch({ type: 'SET_STATE', data: JSON.parse(stored) });}
7391
else {
7492
this.store.dispatch({ type: 'POINT_ADD', data: { point: {x: 0, y: C.CURVE_SIZE, isLockedX: true}, index: 0 } });
7593
this.store.dispatch({ type: 'POINT_ADD', data: { point: {x: 100, y: 0, isLockedX: true}, index: 1 } });
76-
this.store.dispatch({ type: 'POINT_SELECT', data: { index: 0, type: 'straight' } });
94+
// this.store.dispatch({ type: 'POINT_SELECT', data: { index: 0, type: 'straight' } });
7795
}
7896
}
7997

@@ -90,9 +108,77 @@ class API {
90108
if ( this._prevPath !== path ) {
91109
this._prevPath = path;
92110
this._easing = mojs.easing.path( path );
111+
this._fireOnChange( path );
112+
}
113+
}
114+
115+
_fireOnChange ( path ) {
116+
for (var i = 0; i < this._easings.length; i++) {
117+
const record = this._easings[i],
118+
{options, easing} = record,
119+
{onChange} = options;
120+
121+
(typeof onChange === 'function' ) && onChange( easing, path );
122+
this._updateParent( easing );
123+
}
124+
}
125+
126+
_updateParent( easing ) {
127+
const parent = easing._parent;
128+
129+
if ( parent && parent.setProgress ) {
130+
this._triggerParent( parent );
131+
} else if ( parent.timeline ) {
132+
this._triggerParent( parent.timeline )
133+
} else if ( parent.tween ) {
134+
this._triggerParent( parent.tween )
93135
}
94136
}
95137

138+
_triggerParent (parent) {
139+
const step = 0.001,
140+
{progress} = parent,
141+
updateProgress = (progress + step < 1 )
142+
? (progress + step) : (progress - step);
143+
144+
parent.setProgress( updateProgress );
145+
parent.setProgress( progress );
146+
}
147+
148+
getEasing (o={}) {
149+
// get the easing function regarding reverse options
150+
const fun = (() => {
151+
const i = this._easings.length;
152+
return (k) => {
153+
this._updateProgressLine( k, i, this._progressLines );
154+
const transform = this._easings[i].options.transform;
155+
return ( transform )
156+
? transform( this._easing( k ) ) : this._easing( k );
157+
}
158+
})();
159+
160+
this.store.dispatch({ type: 'ADD_PROGRESS_LINE', data: {} });
161+
this._easings.push({ options: o, easing: fun });
162+
163+
defer( () => { this._fireOnChange( this._prevPath ); });
164+
return fun;
165+
}
166+
167+
_updateProgressLine (p, i, lines) {
168+
const el = lines[i],
169+
state = this.store.getState(),
170+
{resize} = state;
171+
172+
if ( !el ) { return; }
173+
174+
el.style.left = `${p*100}%`;
175+
176+
// const x = p * ( C.CURVE_SIZE + resize.temp_right + resize.right ),
177+
// transform = `translateX(${x}px)`;
178+
179+
// mojs.h.setPrefixedStyle( el, 'transform', transform );
180+
}
181+
96182
}
97183

98184
export default API;

0 commit comments

Comments
 (0)