src/extensions/default/InlineTimingFunctionEditor/BezierCurveEditor.js
function BezierCurveEditor($parent, bezierCurve, callback) {
        // Create the DOM structure, filling in localized strings via Mustache
        this.$element = $(Mustache.render(BezierCurveEditorTemplate, Strings));
        $parent.append(this.$element);

        this._callback = callback;
        this.dragElement = null;

        // current cubic-bezier() function params
        this._cubicBezierCoords = this._getCubicBezierCoords(bezierCurve);

        this.hint = {};
        this.hint.elem = $(".hint", this.$element);
        // If function was auto-corrected, then originalString holds the original function,
        // and an informational message needs to be shown
        if (bezierCurve.originalString) {
            TimingFunctionUtils.showHideHint(this.hint, true, bezierCurve.originalString, "cubic-bezier(" + this._cubicBezierCoords.join(", ") + ")");
        } else {
            TimingFunctionUtils.showHideHint(this.hint, false);
        }

        this.P1 = this.$element.find(".P1")[0];
        this.P2 = this.$element.find(".P2")[0];
        this.curve = this.$element.find(".curve")[0];

        this.P1.bezierEditor = this.P2.bezierEditor = this.curve.bezierEditor = this;

        this.bezierCanvas = new BezierCanvas(this.curve, null, [0, 0]);

        // redraw canvas
        this._updateCanvas();

        $(this.curve)
            .on("click", _curveClick)
            .on("mousemove", _curveMouseMove);
        $(this.P1)
            .on("mousemove", _pointMouseMove)
            .on("mousedown", _pointMouseDown)
            .on("mouseup", _pointMouseUp)
            .on("keydown", _pointKeyDown);
        $(this.P2)
            .on("mousemove", _pointMouseMove)
            .on("mousedown", _pointMouseDown)
            .on("mouseup", _pointMouseUp)
            .on("keydown", _pointKeyDown);
    }
function BezierCurveEditor($parent, bezierCurve, callback) {
        // Create the DOM structure, filling in localized strings via Mustache
        this.$element = $(Mustache.render(BezierCurveEditorTemplate, Strings));
        $parent.append(this.$element);

        this._callback = callback;
        this.dragElement = null;

        // current cubic-bezier() function params
        this._cubicBezierCoords = this._getCubicBezierCoords(bezierCurve);

        this.hint = {};
        this.hint.elem = $(".hint", this.$element);
        // If function was auto-corrected, then originalString holds the original function,
        // and an informational message needs to be shown
        if (bezierCurve.originalString) {
            TimingFunctionUtils.showHideHint(this.hint, true, bezierCurve.originalString, "cubic-bezier(" + this._cubicBezierCoords.join(", ") + ")");
        } else {
            TimingFunctionUtils.showHideHint(this.hint, false);
        }

        this.P1 = this.$element.find(".P1")[0];
        this.P2 = this.$element.find(".P2")[0];
        this.curve = this.$element.find(".curve")[0];

        this.P1.bezierEditor = this.P2.bezierEditor = this.curve.bezierEditor = this;

        this.bezierCanvas = new BezierCanvas(this.curve, null, [0, 0]);

        // redraw canvas
        this._updateCanvas();

        $(this.curve)
            .on("click", _curveClick)
            .on("mousemove", _curveMouseMove);
        $(this.P1)
            .on("mousemove", _pointMouseMove)
            .on("mousedown", _pointMouseDown)
            .on("mouseup", _pointMouseUp)
            .on("keydown", _pointKeyDown);
        $(this.P2)
            .on("mousemove", _pointMouseMove)
            .on("mousedown", _pointMouseDown)
            .on("mouseup", _pointMouseUp)
            .on("keydown", _pointKeyDown);
    }
function BezierCurveEditor ( $parent , bezierCurve , callback ) { // Create the DOM structure, filling in localized strings via Mustache this . $element = $ ( Mustache . render ( BezierCurveEditorTemplate , Strings ) ) ; $parent . append ( this . $element ) ; this . _callback = callback ; this . dragElement = null ; // current cubic-bezier() function params this . _cubicBezierCoords = this . _getCubicBezierCoords ( bezierCurve ) ; this . hint = { } ; this . hint . elem = $ ( ".hint" , this . $element ) ; // If function was auto-corrected, then originalString holds the original function, // and an informational message needs to be shown if ( bezierCurve . originalString ) { TimingFunctionUtils . showHideHint ( this . hint , true , bezierCurve . originalString , "cubic-bezier(" + this . _cubicBezierCoords . join ( ", " ) + ")" ) ; } else { TimingFunctionUtils . showHideHint ( this . hint , false ) ; } this . P1 = this . $element . find ( ".P1" ) [ 0 ] ; this . P2 = this . $element . find ( ".P2" ) [ 0 ] ; this . curve = this . $element . find ( ".curve" ) [ 0 ] ; this . P1 . bezierEditor = this . P2 . bezierEditor = this . curve . bezierEditor = this ; this . bezierCanvas = new BezierCanvas ( this . curve , null , [ 0 , 0 ] ) ; // redraw canvas this . _updateCanvas ( ) ; $ ( this . curve ) . on ( "click" , _curveClick ) . on ( "mousemove" , _curveMouseMove ) ; $ ( this . P1 ) . on ( "mousemove" , _pointMouseMove ) . on ( "mousedown" , _pointMouseDown ) . on ( "mouseup" , _pointMouseUp ) . on ( "keydown" , _pointKeyDown ) ; $ ( this . P2 ) . on ( "mousemove" , _pointMouseMove ) . on ( "mousedown" , _pointMouseDown ) . on ( "mouseup" , _pointMouseUp ) . on ( "keydown" , _pointKeyDown ) ; }
Constructor for BezierCurveEditor Object. This control may be used standalone
or within an InlineTimingFunctionEditor inline widget.

@param {!jQuery} $parent  DOM node into which to append the root of the bezier curve editor UI
@param {!RegExpMatch} bezierCurve  RegExp match object of initially selected bezierCurve
@param {!function(string)} callback  Called whenever selected bezierCurve changes
Constructor for BezierCurveEditor Object . This control may be used standalone or within an InlineTimingFunctionEditor inline widget .