Skip to content

Commit 1d53915

Browse files
legomushroomlegomushroom
committed
hammerjs-propagation issue: fix, point creation in FF: fix
1 parent 1851889 commit 1d53915

File tree

9 files changed

+313
-215
lines changed

9 files changed

+313
-215
lines changed

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

Lines changed: 132 additions & 118 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/index.html

Lines changed: 154 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
<body>
88

99
<div class="el" id="js-el"></div>
10+
<div class="el2" id="js-el2"></div>
11+
<div class="shadow" id="js-shadow"></div>
1012
<style>
1113
body, html {
1214
margin: 0;
@@ -18,13 +20,45 @@
1820
.el {
1921
position: absolute;
2022
left: 10%;
21-
top: 50%;
23+
top: 80%;
2224
width: 100px;
2325
height: 100px;
2426
margin-left: -50px;
2527
margin-top: -50px;
2628
background: #572B53;
2729
border-radius: 3px;
30+
z-index: 1;
31+
}
32+
33+
.el2 {
34+
position: absolute;
35+
left: 10%;
36+
top: 80%;
37+
width: 50px;
38+
height: 50px;
39+
margin-left: -25px;
40+
margin-top: -50px;
41+
background: #3A0839;
42+
background: #230323;
43+
/*background: #FF512F;*/
44+
border-radius: 3px;
45+
z-index: 1;
46+
/*transform-origin: center bottom;*/
47+
}
48+
49+
.shadow {
50+
position: absolute;
51+
left: 10%;
52+
top: 80%;
53+
width: 80px;
54+
height: 7px;
55+
margin-left: -40px;
56+
margin-top: 45px;
57+
background: #333;
58+
opacity: .25;
59+
border-radius: 50%;
60+
z-index: 0;
61+
/*transform-origin: center bottom;*/
2862
}
2963
</style>
3064

@@ -34,108 +68,145 @@
3468

3569
<script>
3670

37-
var scaleCurve = new window.MojsCurveEditor({ name: 'curve_scale', isSaveState: true });
38-
39-
var curveEditor = new window.MojsCurveEditor({ name: 'curve1', isSaveState: true });
40-
41-
var html = new mojs.Html({
42-
el: '#js-el',
43-
y: { [-200] : -200, curve: curveEditor.getEasing() },
44-
scaleX: { 2:2, curve: scaleCurve.getEasing() }
45-
});
71+
new MojsCurveEditor({ name: 'some name' });
4672

47-
new MojsPlayer({ add: html });
48-
// scaleX/scaleY : M0, 0 C0.6729540169506724, -28.101525445522107 13.041331697335014, -94.89847455447803 40, -95 C74.3872397312364, -94.81581115980767 71.04133169733501, 0.10152544552201628 100, 0
49-
// 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
50-
// var curveEditor = new window.MojsCurveEditor({ name: 'curve1', isSaveState: true });
51-
// var curveEditor2 = new window.MojsCurveEditor({ name: 'curve2', isSaveState: true });
73+
// var scaleCurve = new window.MojsCurveEditor({ name: 'curve_scale' });
74+
// var rotateCurve = new window.MojsCurveEditor({ name: 'curve_rotate' });
75+
// var originCurve = new window.MojsCurveEditor({ name: 'curve_origin' });
76+
// var curveEditor = new window.MojsCurveEditor({ name: 'curve1' });
77+
// var curveEditorSmall = new window.MojsCurveEditor({ name: 'curve1_small' });
5278

5379
// var CUSTOM_PROPS = {
54-
// originY: {
55-
// type: 'unit',
56-
// default: '50%'
57-
// },
80+
// originY: 50,
5881
// draw (el, props) {
59-
// // console.log(props.y);
60-
// el.style.transformOrigin = `50% ${props.originY}`;
82+
// el.style.transformOrigin = `50% ${props.originY}%`;
6183
// }
6284
// }
6385

64-
// var duration = 500,
65-
// shift = 150;
86+
// var CUSTOM_PROPS_2 = {
87+
// originY: 50,
88+
// draw (el, props) {
89+
// el.style.transformOrigin = `50% ${props.originY}%`;
90+
// }
91+
// }
92+
93+
// const timeline = new mojs.Timeline();
6694

6795
// var html = new mojs.Html({
6896
// el: '#js-el',
69-
// y: { [-shift]: 0, easing: 'cubic.in', duration },
70-
// rotateZ: { [-90]: 0, easing: 'linear.none', duration },
71-
// originY: '50%',
72-
// customProperties: CUSTOM_PROPS
73-
// // transformOrigin: '50% 50%'
74-
// })
75-
// .then({
76-
// scaleX: {
77-
// 1: 1,
78-
// curve: curveEditor.getEasing(),
79-
// duration: duration
80-
// },
97+
// customProperties: CUSTOM_PROPS,
98+
// duration: 1000,
99+
// y: { [-200] : -200, curve: curveEditor.getEasing() },
100+
// scaleX: { 1:1, curve: scaleCurve.getEasing() },
81101
// scaleY: {
82-
// 1: 1,
83-
// curve: curveEditor.getEasing({ transform: (k) => { return 1 + ( 1-k )/1.5; } }),
84-
// duration: duration
102+
// 1:1,
103+
// curve: scaleCurve.getEasing({
104+
// transform: (k) => { return 1 + ( 1-k )/1.5; }
105+
// })
85106
// },
86-
// originY: { '50%': '50%', curve: curveEditor2.getEasing(), duration },
87-
// y: { to: -shift, easing: 'cubic.out', delay: .75*duration, duration },
88-
// rotateZ: { 0: 90, delay: .75*duration, easing: 'linear.none', duration },
89-
// })
90-
91-
// var player = new MojsPlayer({ add: html });
92-
93-
</script>
107+
// angleZ: { 90: 90, curve: rotateCurve.getEasing() },
108+
// originY: { 100: 100, curve: originCurve.getEasing() }
109+
// });
94110

95-
<script>
96-
// var curveEditor = new window.MojsCurveEditor({
97-
// name: 'curve_1', isSaveState: true });
98-
// var curveEditor2 = new window.MojsCurveEditor({ name: 'curve_2', isSaveState: true });
99-
// var curveEditor3 = new window.MojsCurveEditor({ name: 'curve_3', isSaveState: true });
100-
// var curveEditor4 = new window.MojsCurveEditor({ name: 'curve_4', isSaveState: true });
111+
// var html2 = new mojs.Html({
112+
// el: '#js-el2',
113+
// customProperties: CUSTOM_PROPS_2,
114+
// duration: 1000,
115+
// y: { [-300] : -300, curve: curveEditorSmall.getEasing() },
116+
// scaleX: { 1:1, curve: scaleCurve.getEasing() },
117+
// scaleY: {
118+
// 1:1,
119+
// curve: scaleCurve.getEasing({
120+
// transform: (k) => { return 1 + ( 1-k )/1.5; }
121+
// })
122+
// },
123+
// angleZ: { [-90]: -90, curve: rotateCurve.getEasing() },
124+
// originY: { 100: 100, curve: originCurve.getEasing() }
125+
// });
101126

102-
// var CUSTOM_PROPS = {
103-
// originY: {
104-
// type: 'unit',
105-
// default: '50%'
106-
// },
107-
// draw (el, props) {
108-
// el.style.transformOrigin = `50% ${props.originY}`;
109-
// }
127+
// const colors = [ '#7b7b7b', '#6b6b6b', '#5b5b5b', '#4A4A4A' ];
128+
129+
// const burst = new mojs.Burst({
130+
// // parent: '#js-el',
131+
// isShowStart: true,
132+
// degree: 10,
133+
// count: 5,
134+
// angle: {90: 10, easing: 'cubic.inout'},
135+
// left: '10%',
136+
// top: '90%',
137+
// x: { 0: 150, easing: 'cubic.in' },
138+
// // scale: { 0: 1, easing: 'expo.out' },
139+
// y: -5,
140+
// radius: {0:150},
141+
// timeline: { speed: .75 },
142+
// opacity: .65,
143+
// children: {
144+
// // fill: '#222',
145+
// fill: colors,
146+
// radius: 'rand(12,18)',
147+
// isSwirl: true,
148+
// direction: 1,
149+
// pathScale: 'rand(.5, .75)',
150+
// swirlFrequency: 'rand(2, 4)',
151+
// swirlSize: 'rand(10, 17)',
152+
// scale: { 1: 0, easing: 'cubic.inout' },
153+
// // delay: 'rand(300, 350)',
154+
// delay: 235,
155+
// // duration: 'rand(300, 500)'
156+
// duration: 'stagger(300, 35)'
110157
// }
158+
// });
111159

112-
// var duration = 1300,
113-
// shift = 200;
160+
// const burst2 = new mojs.Burst({
161+
// // parent: '#js-el',
162+
// isShowStart: true,
163+
// degree: 10,
164+
// count: 5,
165+
// angle: {[-90]: -10, easing: 'cubic.inout'},
166+
// left: '10%',
167+
// top: '90%',
168+
// x: { 0: -150, easing: 'cubic.in' },
169+
// // scale: { 0: 1, easing: 'expo.out' },
170+
// y: -5,
171+
// radius: {0:150},
172+
// timeline: { speed: .75 },
173+
// opacity: .65,
174+
// children: {
175+
// // fill: '#222',
176+
// fill: colors,
177+
// radius: 'rand(12,18)',
178+
// isSwirl: true,
179+
// direction: 1,
180+
// pathScale: 'rand(.5, .75)',
181+
// swirlFrequency: 'rand(2, 4)',
182+
// swirlSize: 'rand(10, 17)',
183+
// scale: { 1: 0, easing: 'cubic.inout' },
184+
// // delay: 'rand(300, 350)',
185+
// delay: 235,
186+
// // duration: 'rand(300, 500)'
187+
// duration: 'stagger(300, 35)'
188+
// }
189+
// });
114190

115-
// var scaleXEasing = mojs.easing.path('M0, 0 C0, 0 20.587826704563234, 0.2556510416340589 30, 0 C36.26931615257986, -88.2556510416341 42.626912355168805, -90.00829536701315 50, -90 C67.23156561545866, -87.42027606155817 62.11908815856753, -13.0664841947621 82.61682242990655, 0 C90.11322158776092, 0.49505562333352426 100, 0 100, 0 '),
116-
// scaleYEasing = function (k) { return 1 + ( 1 - scaleXEasing(k) )/1.25 };
191+
// burst.el.style.zIndex = 3;
192+
// burst2.el.style.zIndex = 3;
117193

118-
// var html = new mojs.Html({
119-
// el: '#js-el',
120-
// timeline: {
121-
// repeat: 10
122-
// },
123-
// // transformOrigin: '50% 100%',
124-
// y: { [-shift]: -shift, curve: curveEditor.getEasing(), duration },
125-
// z: 0,
126-
// // y: { [-shift]: -shift, curve: 'M0, 0 C0, 0 5, 0 5, 0 C5, 0 27.204891108505585, 17.714285714285666 30, 100 C32.57142857142857, 100 68.93670267546892, 100.20610272857023 72.29729729729729, 100 C77.4927981877672, 32.65104012857265 95, 0 95, 0 C95, 0 100, 0 100, 0 ', duration },
127-
// scaleX: { 1: 1, curve: scaleXEasing, duration },
128-
// scaleY: { 1: 1, curve: scaleYEasing, duration },
129-
// rotateZ: { [-90]: -90, curve: 'M0, 0 C0, 0 27.900763358778626, 100 27.900763358778626, 100 C27.900763358778626, 100 75, 100 75, 100 C75, 100 100, 200 100, 200 ', duration },
130-
// originY: { '100%': '100%', curve: curveEditor4.getEasing(), duration },
131-
// // originY: { '100%': '100%', curve: 'M0, 50 C0, 50 27, 50 27, 50 C27, 50 28, 0 28, 0 C28, 0 75, 0 75, 0 C75, 0 80, 50 80, 50 C80, 50 100, 50 100, 50 ', duration },
132-
133-
// customProperties: CUSTOM_PROPS
194+
// var shadow = new mojs.Html({
195+
// el: '#js-shadow',
196+
// duration: 1000,
197+
// opacity: { 1: 1, curve: scaleCurve.getEasing({
198+
// transform: (k) => {
199+
// return Math.max((k - 1)/4, .05);
200+
// }
201+
// }) },
202+
// scale: { 1:1, curve: scaleCurve.getEasing({
203+
// transform: (k) => { return 1.35*k; }
204+
// })}
134205
// });
135206

136-
// // html.play();
137-
138-
// var player = new MojsPlayer({ add: html });
207+
// timeline.add(html, html2, burst, burst2, shadow);
208+
209+
// new MojsPlayer({ add: timeline });
139210

140211
</script>
141212

‎app/js/app.babel.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ class API {
4343
}
4444

4545
_vars () {
46-
this.revision = '1.4.0';
46+
this.revision = '1.4.3';
4747
this.store = initStore();
4848

4949
this._easings = [];

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,6 @@ class CurveEditor extends Component {
7575
const x = e.deltaX, y = e.deltaY;
7676
store.dispatch({ type: 'EDITOR_TRANSLATE_END', data: { x, y } })
7777
})
78-
// .on('tap', (e) => { store.dispatch({ type: 'POINT_DESELECT_ALL' }); });
7978

8079
this._addKeyUp();
8180
this._subscribeFocus();

‎app/js/tags/curve.babel.jsx

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ class Curve extends Component {
6565
const {resize} = state;
6666
if (!state.controls.isMinimize) { return 100; }
6767

68-
return C.CURVE_SIZE*8;
68+
return C.CURVE_SIZE*4.28;
6969
}
7070

7171
_getStyle(state) {
@@ -155,13 +155,18 @@ class Curve extends Component {
155155

156156
componentDidUpdate () { this._updateDomProgressLines(); }
157157

158+
componentWillMount () {
159+
this._isFirefox = (navigator.userAgent.indexOf("Firefox") > -1);
160+
}
161+
158162
componentDidMount () {
159163
this._updateDomProgressLines();
160164

161165
const {store} = this.context,
162166
el = this.base.querySelector('#js-segments'),
163167
mc = propagating(new Hammer.Manager(el));
164168

169+
165170
// mc.add(new Hammer.Pan({ threshold: 0 }));
166171
mc.add(new Hammer.Tap);
167172

@@ -173,9 +178,20 @@ class Curve extends Component {
173178
// handle paths only
174179
if ( target.tagName.toLowerCase() !== 'path' ) { return; }
175180
// coordinates
176-
const x = ev.offsetX/state.resize.scalerX,
177-
y = ev.offsetY,
178-
index = parseInt(target.getAttribute('data-index')) + 1;
181+
let x = ev.offsetX;
182+
let y = ev.offsetY;
183+
let index = parseInt(target.getAttribute('data-index')) + 1;
184+
185+
// normalize for FF issue - it calculates
186+
// events regarding `viewBox` of `svg` tag
187+
if (!this._isFirefox) { x /= state.resize.scalerX; }
188+
else {
189+
y *= C.CURVE_PERCENT;
190+
x -= 1;
191+
y -= 1;
192+
}
193+
194+
this._isFirefox
179195

180196
store.dispatch({
181197
type: 'POINT_ADD',

‎app/js/tags/little-handle.babel.jsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,8 @@ class LittleHandle extends Component {
3838
.on('pan', (e) => {
3939
const {index, parentIndex, state} = this.props,
4040
point = angleToPoint( handle.angle, handle.radius ),
41-
// newX = point.x + e.deltaX,
4241
newY = point.y + e.deltaY,
4342
{resize} = state,
44-
// absolute x regarding horizontal size
4543
absX = point.x + (e.deltaX)/resize.absScalerX,
4644
angle = pointToAngle( absX, newY );
4745

‎mockups/curve-editor.sketch

0 Bytes
Binary file not shown.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mojs-curve-editor",
3-
"version": "1.4.0",
3+
"version": "1.4.3",
44
"description": "mojs GUI for editing easing/property curves",
55
"keywords": [
66
"mojs",

0 commit comments

Comments
 (0)