Skip to content

Commit

Permalink
perf(menu): improves menu performance and fixes some edge cases
Browse files Browse the repository at this point in the history
  • Loading branch information
manucorporat committed Nov 25, 2016
1 parent b515f52 commit 3209895
Show file tree
Hide file tree
Showing 8 changed files with 67 additions and 30 deletions.
24 changes: 21 additions & 3 deletions src/animations/animation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -504,12 +504,14 @@ export class Animation {

// set the after styles
// ******** DOM WRITE ****************
self._playEnd(1);
self._playEnd(shouldComplete ? 1 : 0);

// transition finished
self._didFinishAll(shouldComplete, true, false);
}

assert(dur > 0, 'duration can not be 0 in async animations');

// set the TRANSITION END event on one of the transition elements
self._unrgTrns = transitionEnd(self._transEl(), onTransitionEnd);

Expand Down Expand Up @@ -641,6 +643,8 @@ export class Animation {
var fromNum = fx.from.num;
var toNum = fx.to.num;
var tweenEffect = (fromNum !== toNum);

assert(tweenEffect || !this._isAsync, 'in async animations to != from value');
if (tweenEffect) {
this._twn = true;
}
Expand All @@ -655,7 +659,12 @@ export class Animation {

} else if (tweenEffect) {
// EVERYTHING IN BETWEEN
val = (((toNum - fromNum) * stepValue) + fromNum) + fx.to.unit;
var valNum = (((toNum - fromNum) * stepValue) + fromNum);
var unit = fx.to.unit;
if (unit === 'px') {
valNum = Math.round(valNum);
}
val = valNum + unit;
}

if (val !== null) {
Expand Down Expand Up @@ -1011,11 +1020,20 @@ export class Animation {
progressEnd(shouldComplete: boolean, currentStepValue: number, dur: number = -1) {
console.debug('Animation, progressEnd, shouldComplete', shouldComplete, 'currentStepValue', currentStepValue);

if (this._rv) {
// if the animation is going in reverse then
// flip the step value: 0 becomes 1, 1 becomes 0
currentStepValue = ((currentStepValue * -1) + 1);
}
const stepValue = shouldComplete ? 1 : 0;

if (dur < 0) {
const diff = Math.abs(currentStepValue - stepValue);
if (diff < 0.05) {
dur = 0;
} else if (dur < 0) {
dur = this._dur;
}

this._isAsync = (dur > 30);

this._progressEnd(shouldComplete, stepValue, dur, this._isAsync);
Expand Down
5 changes: 5 additions & 0 deletions src/components/menu/menu-gestures.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,11 @@ export class MenuContentGesture extends SlideEdgeGesture {
// Set CSS, then wait one frame for it to apply before sliding starts
onSlideBeforeStart(ev: any) {
console.debug('menu gesture, onSlideBeforeStart', this.menu.side);
this.menu.swipeBeforeStart();
}

onSlideStart() {
console.debug('menu gesture, onSlideStart', this.menu.side);
this.menu.swipeStart();
}

Expand Down
21 changes: 17 additions & 4 deletions src/components/menu/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -435,15 +435,27 @@ export class Menu {
this._app.isEnabled();
}

/**
* @private
*/
swipeBeforeStart() {
if (!this.canSwipe()) {
assert(false, 'canSwipe() has to be true');
return;
}
this._before();
}

/**
* @private
*/
swipeStart() {
// user started swiping the menu open/close
if (this.canSwipe()) {
this._before();
this._getType().setProgressStart(this.isOpen);
// user actively dragging the menu
if (!this._isAnimating) {
assert(false, '_isAnimating has to be true');
return;
}
this._getType().setProgressStart(this.isOpen);
}

/**
Expand All @@ -452,6 +464,7 @@ export class Menu {
swipeProgress(stepValue: number) {
// user actively dragging the menu
if (!this._isAnimating) {
assert(false, '_isAnimating has to be true');
return;
}
this._getType().setProgessStep(stepValue);
Expand Down
3 changes: 2 additions & 1 deletion src/components/toolbar/toolbar.ios.scss
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,12 @@ $navbar-ios-height: $toolbar-ios-height !default;
}

.toolbar-title-ios {
margin-top: 1px;

font-size: $toolbar-ios-title-font-size;
font-weight: $toolbar-ios-title-font-weight;
text-align: $toolbar-ios-title-text-align;
color: $toolbar-ios-title-text-color;
margin-top: 1px;

pointer-events: auto;
}
Expand Down
14 changes: 6 additions & 8 deletions src/gestures/drag-gesture.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { defaults } from '../util/util';
import { defaults, assert } from '../util/util';
import { GestureDelegate } from '../gestures/gesture-controller';
import { PanRecognizer } from './recognizers';
import { PointerEvents, PointerEventsConfig, UIEventManager } from '../util/ui-event-manager';
Expand Down Expand Up @@ -26,7 +26,7 @@ export class PanGesture {
private events: UIEventManager = new UIEventManager(false);
private pointerEvents: PointerEvents;
private detector: PanRecognizer;
private started: boolean = false;
protected started: boolean = false;
private captured: boolean = false;
public isListening: boolean = false;
protected gestute: GestureDelegate;
Expand Down Expand Up @@ -106,10 +106,10 @@ export class PanGesture {
}

pointerMove(ev: any) {
if (!this.started) {
return;
}
this.debouncer.debounce(() => {
if (!this.started) {
return;
}
if (this.captured) {
this.onDragMove(ev);
return;
Expand All @@ -134,11 +134,9 @@ export class PanGesture {
}

pointerUp(ev: any) {
assert(this.started, 'started failed');
this.debouncer.cancel();

if (!this.started) {
return;
}
this.gestute && this.gestute.release();

if (this.captured) {
Expand Down
23 changes: 13 additions & 10 deletions src/gestures/slide-gesture.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { PanGesture } from './drag-gesture';
import { clamp } from '../util/util';
import { pointerCoord } from '../util/dom';
import { clamp, assert } from '../util/util';
import { nativeRaf, pointerCoord } from '../util/dom';

/**
* @private
Expand Down Expand Up @@ -49,16 +49,21 @@ export class SlideGesture extends PanGesture {
distance: 0,
velocity: 0,
};
let {min, max} = this.getSlideBoundaries(this.slide, ev);
this.slide.min = min;
this.slide.max = max;
this.slide.elementStartPos = this.getElementStartPos(this.slide, ev);

this.onSlideStart(this.slide, ev);
this.started = false;
nativeRaf(() => {
let {min, max} = this.getSlideBoundaries(this.slide, ev);
this.slide.min = min;
this.slide.max = max;
this.slide.elementStartPos = this.getElementStartPos(this.slide, ev);
this.started = true;
this.onSlideStart(this.slide, ev);
});
}

onDragMove(ev: any) {
let slide: SlideData = this.slide;
assert(slide.min !== slide.max, 'slide data must be properly initialized');

let coord = <any>pointerCoord(ev);
let newPos = coord[this.direction];
let newTimestamp = Date.now();
Expand All @@ -74,8 +79,6 @@ export class SlideGesture extends PanGesture {
slide.velocity = velocity;
slide.delta = newPos - slide.pointerStartPos;
this.onSlide(slide, ev);

return true;
}

onDragEnd(ev: any) {
Expand Down
2 changes: 1 addition & 1 deletion src/themes/ionic.theme.dark.ios.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ $item-ios-note-color: #f4f4f4 !default;
// --------------------------------------------------

$toolbar-ios-background: $toolbar-background !default;
$toolbar-ios-border-color: rgba(255, 255, 255, 0.1) !default;
$toolbar-ios-border-color: rgba(255, 255, 255, .1) !default;
$toolbar-ios-text-color: $toolbar-text-color !default;
$toolbar-ios-active-color: $toolbar-active-color !default;
$toolbar-ios-inactive-color: $toolbar-inactive-color !default;
Expand Down
5 changes: 2 additions & 3 deletions src/transitions/page-transition.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Animation } from '../animations/animation';
import { Content } from '../components/content/content';
import { Transition } from './transition';


Expand All @@ -24,7 +23,7 @@ export class PageTransition extends Transition {
* DOM READ
*/
readDimensions() {
const content = <Content>this.enteringView.getIONContent();
const content = this.enteringView.getIONContent();
if (content) {
content.readDimensions();
}
Expand All @@ -34,7 +33,7 @@ export class PageTransition extends Transition {
* DOM WRITE
*/
writeDimensions() {
const content = <Content>this.enteringView.getIONContent();
const content = this.enteringView.getIONContent();
if (content) {
content.writeDimensions();
}
Expand Down

0 comments on commit 3209895

Please sign in to comment.