Skip to content

Commit 064fafc

Browse files
legomushroomlegomushroom
committed
curve-editor: fix pattern
1 parent 8ce128e commit 064fafc

17 files changed

+161
-101
lines changed

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

Lines changed: 97 additions & 74 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/curve-editor.postcss.css‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
z-index: 100;
1212
/*box-shadow: 2px 2px 2px rgba(0,0,0,.38);*/
1313
box-shadow: 0 0 calc( 3*$PX ) calc( 1*$PX ) rgba(0,0,0,.38);
14-
/*transition: width .15s ease-out, height .15s ease-out;*/
14+
/*transition: border-radius .2s ease-out;*/
1515

1616
& * {
1717
box-sizing: border-box;
@@ -27,7 +27,7 @@
2727
padding: calc($gap*$PX);
2828
cursor: move;
2929

30-
[data-component="minimize-button"] {
30+
[data-component="code-button"] {
3131
margin-top: calc(5*$PX);
3232
}
3333

@@ -108,6 +108,12 @@
108108
display: none;
109109
}
110110

111+
/*&.is-minimize-transition {
112+
transition: width .15s ease-out,
113+
height .15s ease-out,
114+
border-radius .15s ease-out;
115+
}*/
116+
111117
&.is-minimized {
112118
width: calc(100*$PX) !important;
113119
height: calc(45*$PX) !important;

‎app/css/blocks/curve-editor.postcss.css.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"curve-editor":"_curve-editor_xcm7a_3","curve-editor__left":"_curve-editor__left_xcm7a_1","curve-editor__right":"_curve-editor__right_xcm7a_126","curve-editor__resize-handle":"_curve-editor__resize-handle_xcm7a_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_xcm7a_121","curve-editor__mojs-logo":"_curve-editor__mojs-logo_xcm7a_122","is-minimized":"_is-minimized_xcm7a_111","curve__svg-wrapper":"_curve__svg-wrapper_xcm7a_130"}
1+
{"curve-editor":"_curve-editor_1v48l_3","curve-editor__left":"_curve-editor__left_1v48l_1","curve-editor__right":"_curve-editor__right_1v48l_132","curve-editor__resize-handle":"_curve-editor__resize-handle_1v48l_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_1v48l_127","curve-editor__mojs-logo":"_curve-editor__mojs-logo_1v48l_128","is-minimized":"_is-minimized_1v48l_117","curve__svg-wrapper":"_curve__svg-wrapper_1v48l_136"}

‎app/index.html‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,20 @@
3333
<script src="build/mojs-curve-editor.js" charset="utf-8"></script>
3434

3535
<script>
36+
37+
var scaleCurve = new window.MojsCurveEditor({ name: 'curve_scale', isSaveState: true });
38+
39+
var curveEditor11 = new window.MojsCurveEditor({ name: 'curve111', isSaveState: true });
40+
41+
var curveEditor = new window.MojsCurveEditor({ name: 'curve1', isSaveState: true });
42+
43+
// var html = new mojs.Html({
44+
// el: '#js-el',
45+
// y: { [-200] : -200, curve: curveEditor.getEasing() },
46+
// scaleX: { 2:2, curve: scaleCurve.getEasing() }
47+
// });
48+
49+
// new MojsPlayer({ add: html });
3650
// scaleX/scaleY : M0, 0 C0.6729540169506724, -28.101525445522107 13.041331697335014, -94.89847455447803 40, -95 C74.3872397312364, -94.81581115980767 71.04133169733501, 0.10152544552201628 100, 0
3751
// originY : M0, 0 C4.324651237095854, -97.09389091882751 -12.269098738159038, -100.52241754574061 40, -100 C69.70027963716932, -99.70315257828365 75, -100 75, -100 C75, -100 77.18670774544789, -105.94552943119928 80, 0 C93.51535255761112, -0.007114543223372127 100, 0 100, 0
3852
// var curveEditor = new window.MojsCurveEditor({ name: 'curve1', isSaveState: true });
@@ -81,8 +95,8 @@
8195
</script>
8296

8397
<script>
84-
var curveEditor = new window.MojsCurveEditor({
85-
name: 'curve_1', isSaveState: true });
98+
// var curveEditor = new window.MojsCurveEditor({
99+
// name: 'curve_1', isSaveState: true });
86100
// var curveEditor2 = new window.MojsCurveEditor({ name: 'curve_2', isSaveState: true });
87101
// var curveEditor3 = new window.MojsCurveEditor({ name: 'curve_3', isSaveState: true });
88102
// var curveEditor4 = new window.MojsCurveEditor({ name: 'curve_4', isSaveState: true });

‎app/js/app.babel.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ class API {
3333
}
3434
}
3535

36-
3736
_extendDefaults () {
3837
this._props = {};
3938

@@ -43,7 +42,7 @@ class API {
4342
}
4443

4544
_vars () {
46-
this.revision = '1.0.1';
45+
this.revision = '1.2.1';
4746
this.store = initStore();
4847

4948
this._easings = [];
@@ -137,6 +136,8 @@ class API {
137136
_updateParent( easing ) {
138137
const parent = easing._parent;
139138

139+
// console.log(parent.timeline.callbacksContext);
140+
140141
if ( parent && parent.setProgress ) {
141142
this._triggerParent( parent );
142143
} else if ( parent.timeline ) {
@@ -147,11 +148,12 @@ class API {
147148
}
148149

149150
_triggerParent (parent) {
150-
const step = 0.001,
151+
const step = 0.01,
151152
{progress} = parent,
152153
updateProgress = (progress + step < 1 )
153154
? (progress + step) : (progress - step);
154155

156+
// console.log(updateProgress, progress);
155157
parent.setProgress( updateProgress );
156158
parent.setProgress( progress );
157159
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ const controls = (state = INITIAL_STATE, action) => {
1212
case 'SET_MINIMIZE': {
1313
return { ...state, isMinimize: action.data };
1414
}
15+
case 'RESET_MINIMIZE_TRANISTION': {
16+
return { ...state, isTransition: false };
17+
}
1518
}
1619
return state;
1720
}

‎app/js/store.babel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@ import {createStore} from 'redux';
22
// import reducer
33
import reducer from './reducers/index-reducer';
44

5-
const initStore = () => { return createStore( reducer ); }
5+
const initStore = () => { return createStore( reducer ); }
66

77
export default initStore;

‎app/js/tags/code-button.babel.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Hammer from 'hammerjs';
66
class CodeButton extends Component {
77
render () {
88
const {state} = this.props;
9-
return <div data-component="code-button">
9+
return <div data-component="code-button" title="get code">
1010
<IconButton shape="code" isCheck={state.controls.isCode} />
1111
</div>;
1212
}

‎app/js/tags/curve-editor-left.babel.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ const CLASSES = require('../../css/blocks/curve-editor.postcss.css.json');
1111

1212
const CurveEditorLeft = ({state}) => {
1313
return <div className={CLASSES['curve-editor__left']} id="js-left-panel">
14-
<CodeButton state={state} />
1514
<MinimizeButton state={state} />
1615
<MaximizeButton state={state} />
16+
<CodeButton state={state} />
1717
<IconDivider />
1818
<PointControls state={state}
1919
className={CLASSES['curve-editor__anchor-buttons']} />

0 commit comments

Comments
 (0)