Skip to content

Commit

Permalink
fix: move to new tween library. Smaller bundle for same result
Browse files Browse the repository at this point in the history
  • Loading branch information
@farfromrefug
farfromrefug committed Oct 12, 2021
1 parent 0275c52 commit b41fdde
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 100 deletions.
98 changes: 47 additions & 51 deletions src/charting/animation/ChartAnimator.ts
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,58 @@
import TWEEN from '@nativescript-community/tween';
const Easing = TWEEN.Easing;
export type EasingFunction = (k: number) => number;
export { Easing };
/**
* Object responsible for all animations in the Chart. Animations require API level 11.
*
import { time } from '@nativescript/core/profiling';
import { AdditiveTweening, EasingFunction } from 'additween';
export { EasingFunction };
if (!global.window) {
window = global.window = {
requestAnimationFrame,
cancelAnimationFrame,
performance: {
now: time
}
} as any;
}

*/
function clamp(value) {
return Math.min(1, Math.max(0, value));
}

class Tween<T extends Record<string, number>> extends AdditiveTweening<T> {}
export class ChartAnimator {
/** object that is updated upon animation update */
private mListener: () => void;
private mListener: (state) => void;

/** The phase of drawn values on the y-axis. 0 - 1 */
protected mPhaseY = 1;

/** The phase of drawn values on the x-axis. 0 - 1 */
protected mPhaseX = 1;

constructor(listener?: () => void) {
constructor(listener?: (state) => void) {
this.mListener = listener;
}

private xAnimator(duration, easing: EasingFunction = Easing.Linear.None, listener?: () => void) {
return new TWEEN.Tween({ value: 0 })
.to({ value: 1 }, duration)
.easing(easing)
.onUpdate((obj) => {
this.setPhaseX(obj.value);
private startAnim(duration, easing?: EasingFunction, listener?: (state) => void) {
const anim = new Tween({
onRender: (state) => {
if (listener) {
listener();
listener(state);
}
});
}
});
anim.tween({ value: 0 }, { value: 1 }, duration);
return anim;
}
private startXAnim(duration, easing?: EasingFunction, listener?: (state) => void) {
return this.startAnim(duration, easing, (state) => {
this.setPhaseX(state.value);
listener?.(state);
});
}

private yAnimator(duration, easing: EasingFunction = Easing.Linear.None, listener?: () => void) {
return new TWEEN.Tween({ value: 0 })
.to({ value: 1 }, duration)
.easing(easing)
.onUpdate((obj) => {
this.setPhaseY(obj.value);
if (listener) {
listener();
}
});
private startYAnim(duration, easing?: EasingFunction, listener?: (state) => void) {
return this.startAnim(duration, easing, (state) => {
this.setPhaseY(state.value);
listener?.(state);
});
}

/**
Expand All @@ -51,9 +61,8 @@ export class ChartAnimator {
* @param durationMillis animation duration
* @param easing EasingFunction
*/
public animateX(durationMillis, easing: EasingFunction = Easing.Linear.None) {
const animatorX = this.xAnimator(durationMillis, easing, this.mListener);
animatorX.start(0);
public animateX(durationMillis, easing?: EasingFunction) {
this.startXAnim(durationMillis, easing, this.mListener);
}

/**
Expand All @@ -64,11 +73,9 @@ export class ChartAnimator {
* @param easingX EasingFunction for the X axis
* @param easingY EasingFunction for the Y axis
*/
public animateXY(durationMillisX, durationMillisY, easingX: EasingFunction = Easing.Linear.None, easingY: EasingFunction = Easing.Linear.None) {
const xAnimator = this.xAnimator(durationMillisX, easingX, durationMillisX > durationMillisY ? this.mListener : undefined);
const yAnimator = this.yAnimator(durationMillisY, easingY || easingX, durationMillisX > durationMillisY ? undefined : this.mListener);
xAnimator.start(0);
yAnimator.start(0);
public animateXY(durationMillisX, durationMillisY, easingX?: EasingFunction, easingY?: EasingFunction) {
this.startXAnim(durationMillisX, easingX, durationMillisX > durationMillisY ? this.mListener : undefined);
this.startYAnim(durationMillisY, easingY || easingX, durationMillisX > durationMillisY ? undefined : this.mListener);
}

/**
Expand All @@ -77,9 +84,8 @@ export class ChartAnimator {
* @param durationMillis animation duration
* @param easing EasingFunction
*/
public animateY(durationMillis, easing: EasingFunction = Easing.Linear.None) {
const animatorY = this.yAnimator(durationMillis, easing, this.mListener);
animatorY.start(0);
public animateY(durationMillis, easing?: EasingFunction) {
this.startYAnim(durationMillis, easing, this.mListener);
}

/**
Expand All @@ -97,12 +103,7 @@ export class ChartAnimator {
* @param phase let value between 0 - 1
*/
public setPhaseY(phase) {
if (phase > 1) {
phase = 1;
} else if (phase < 0) {
phase = 0;
}
this.mPhaseY = phase;
this.mPhaseY = clamp(phase);
}

/**
Expand All @@ -120,11 +121,6 @@ export class ChartAnimator {
* @param phase let value between 0 - 1
*/
public setPhaseX(phase) {
if (phase > 1) {
phase = 1;
} else if (phase < 0) {
phase = 0;
}
this.mPhaseX = phase;
this.mPhaseX = clamp(phase);
}
}
67 changes: 18 additions & 49 deletions src/charting/charts/Chart.ts
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,25 @@
import { IDataSet } from '../interfaces/datasets/IDataSet';
import { DataSet } from '../data/DataSet';
import { Entry } from '../data/Entry';
import { ChartData } from '../data/ChartData';
import { ChartInterface } from '../interfaces/dataprovider/ChartInterface';
import { PanGestureHandlerOptions, PinchGestureHandlerOptions, TapGestureHandlerOptions } from '@nativescript-community/gesturehandler';
import { Align, Canvas, CanvasView, Paint } from '@nativescript-community/ui-canvas';
import { DefaultValueFormatter } from '../formatter/DefaultValueFormatter';
import { CLog, CLogTypes, Utils } from '../utils/Utils';
import { Color } from '@nativescript/core/color';
import { Highlight } from '../highlight/Highlight';
import { Legend } from '../components/Legend';
import { ViewPortHandler } from '../utils/ViewPortHandler';
import { XAxis } from '../components/XAxis';
import { EventData, Trace } from '@nativescript/core';
import { layout } from '@nativescript/core/utils/utils';
import { ChartAnimator, EasingFunction } from '../animation/ChartAnimator';
import { Description } from '../components/Description';
import { DataRenderer } from '../renderer/DataRenderer';
import { IMarker } from '../components/IMarker';
import { LegendRenderer } from '../renderer/LegendRenderer';
import { Legend } from '../components/Legend';
import { XAxis } from '../components/XAxis';
import { ChartData } from '../data/ChartData';
import { Entry } from '../data/Entry';
import { DefaultValueFormatter } from '../formatter/DefaultValueFormatter';
import { Highlight } from '../highlight/Highlight';
import { IHighlighter } from '../highlight/IHighlighter';
import { profile } from '@nativescript/core/profiling';
import { ChartAnimator, EasingFunction } from '../animation/ChartAnimator';
import { ChartInterface } from '../interfaces/dataprovider/ChartInterface';
import { IDataSet } from '../interfaces/datasets/IDataSet';
import { ViewPortJob } from '../jobs/ViewPortJob';
import { ChartTouchListener } from '../listener/ChartTouchListener';
import { layout } from '@nativescript/core/utils/utils';
import { EventData, Trace } from '@nativescript/core';
import { addWeakEventListener, removeWeakEventListener } from '@nativescript/core/ui/core/weak-event-listener';
import { PanGestureHandlerOptions, PinchGestureHandlerOptions, TapGestureHandlerOptions } from '@nativescript-community/gesturehandler';
import { DataRenderer } from '../renderer/DataRenderer';
import { LegendRenderer } from '../renderer/LegendRenderer';
import { CLog, CLogTypes, Utils } from '../utils/Utils';
import { ViewPortHandler } from '../utils/ViewPortHandler';

const LOG_TAG = 'NSChart';

Expand All @@ -47,11 +43,6 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
abstract getYChartMax();
abstract getMaxVisibleCount();

/**
* flag that indicates if logging is enabled or not
*/
protected mLogEnabled;

/**
* object that holds all data that was originally set for the chart, before
* it was modified or any filtering algorithms had been applied
Expand Down Expand Up @@ -176,7 +167,7 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
/**
* tasks to be done after the view is setup
*/
protected mJobs = [];
protected mJobs = [];

/**
* default constructor for initialization in code
Expand All @@ -199,7 +190,7 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
* initialize all paints and stuff
*/
protected init() {
this.mAnimator = new ChartAnimator(() => {
this.mAnimator = new ChartAnimator((state) => {
// during animations we dont need to compute axis things
this.noComputeOnNextDraw = true;
this.invalidate();
Expand Down Expand Up @@ -918,27 +909,6 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
return this.mExtraLeftOffset;
}

/**
* Set this to true to enable logcat outputs for the chart. Beware that
* logcat output decreases rendering performance. Default: disabled.
*
* @deprecated use Nativescript Trace with ChartTraceCategory
* @param enabled
*/
public setLogEnabled(enabled) {
this.mLogEnabled = enabled;
}

/**
* Returns true if log-output is enabled for the chart, fals if not.
*
* @deprecated use Nativescript Trace with ChartTraceCategory
* @return
*/
public isLogEnabled() {
return this.mLogEnabled;
}

/**
* Sets the text that informs the user that there is no data available with
* which to draw the chart.
Expand Down Expand Up @@ -1304,7 +1274,6 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
// return saveToGallery(fileName, "", "MPAndroidChart-Library Save", Bitmap.CompressFormat.PNG, 40);
// }


public removeViewportJob(job) {
const index = this.mJobs.indexOf(job);
if (index >= 0) {
Expand Down

0 comments on commit b41fdde

Please sign in to comment.