Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(581)

Side by Side Diff: chrome/browser/resources/settings/people_page/fingerprint_progress_arc.js

Issue 2946563002: Run clang-format on .js files in c/b/r/settings (Closed)
Patch Set: dschuyler@ review Created 3 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright 2017 The Chromium Authors. All rights reserved. 1 // Copyright 2017 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 (function() { 5 (function() {
6 6
7 /** 7 /**
8 * The time in millseconds of the animation updates. 8 * The time in millseconds of the animation updates.
9 * @const {number} 9 * @const {number}
10 */ 10 */
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after
70 * @param {number} endAngle The end angle of the arc we want to draw. 70 * @param {number} endAngle The end angle of the arc we want to draw.
71 * @param {string} color The color of the arc we want to draw. The string is 71 * @param {string} color The color of the arc we want to draw. The string is
72 * in the format rgba(r',g',b',a'). r', g', b' are values from [0-255] 72 * in the format rgba(r',g',b',a'). r', g', b' are values from [0-255]
73 * and a' is a value from [0-1]. 73 * and a' is a value from [0-1].
74 */ 74 */
75 drawArc: function(startAngle, endAngle, color) { 75 drawArc: function(startAngle, endAngle, color) {
76 var c = this.$.canvas; 76 var c = this.$.canvas;
77 var ctx = c.getContext('2d'); 77 var ctx = c.getContext('2d');
78 78
79 ctx.beginPath(); 79 ctx.beginPath();
80 ctx.arc(c.width / 2, c.height / 2, this.canvasCircleRadius_, startAngle, 80 ctx.arc(
81 c.width / 2, c.height / 2, this.canvasCircleRadius_, startAngle,
81 endAngle); 82 endAngle);
82 ctx.lineWidth = this.canvasCircleStrokeWidth_; 83 ctx.lineWidth = this.canvasCircleStrokeWidth_;
83 ctx.strokeStyle = color; 84 ctx.strokeStyle = color;
84 ctx.stroke(); 85 ctx.stroke();
85 }, 86 },
86 87
87 /** 88 /**
88 * Draws a circle on the canvas element around the center with radius 89 * Draws a circle on the canvas element around the center with radius
89 * |CANVAS_CIRCLE_RADIUS| and color |CANVAS_CIRCLE_BACKGROUND_COLOR|. 90 * |CANVAS_CIRCLE_RADIUS| and color |CANVAS_CIRCLE_BACKGROUND_COLOR|.
90 */ 91 */
(...skipping 11 matching lines...) Expand all
102 drawShadow: function(blur, offsetX, offsetY) { 103 drawShadow: function(blur, offsetX, offsetY) {
103 var c = this.$.canvas; 104 var c = this.$.canvas;
104 var ctx = c.getContext('2d'); 105 var ctx = c.getContext('2d');
105 106
106 ctx.beginPath(); 107 ctx.beginPath();
107 ctx.translate(-c.width, 0); 108 ctx.translate(-c.width, 0);
108 ctx.shadowOffsetX = c.width + offsetX; 109 ctx.shadowOffsetX = c.width + offsetX;
109 ctx.shadowOffsetY = 0; 110 ctx.shadowOffsetY = 0;
110 ctx.shadowColor = this.canvasCircleShadowColor_; 111 ctx.shadowColor = this.canvasCircleShadowColor_;
111 ctx.shadowBlur = blur; 112 ctx.shadowBlur = blur;
112 ctx.arc(c.width / 2, c.height / 2, 113 ctx.arc(
114 c.width / 2, c.height / 2,
113 this.canvasCircleRadius_ - this.canvasCircleStrokeWidth_ / 2 + blur / 2, 115 this.canvasCircleRadius_ - this.canvasCircleStrokeWidth_ / 2 + blur / 2,
114 0, 2*Math.PI); 116 0, 2 * Math.PI);
115 ctx.stroke(); 117 ctx.stroke();
116 ctx.translate(c.width, 0); 118 ctx.translate(c.width, 0);
117 }, 119 },
118 120
119 /** 121 /**
120 * Animates the progress the circle. Animates an arc that starts at the top of 122 * Animates the progress the circle. Animates an arc that starts at the top of
121 * the circle to startAngle, to an arc that starts at the top of the circle to 123 * the circle to startAngle, to an arc that starts at the top of the circle to
122 * endAngle. 124 * endAngle.
123 * @param {number} startAngle The start angle of the arc we want to draw. 125 * @param {number} startAngle The start angle of the arc we want to draw.
124 * @param {number} endAngle The end angle of the arc we want to draw. 126 * @param {number} endAngle The end angle of the arc we want to draw.
125 */ 127 */
126 animate: function(startAngle, endAngle) { 128 animate: function(startAngle, endAngle) {
127 var currentAngle = startAngle; 129 var currentAngle = startAngle;
128 // The value to update the angle by each tick. 130 // The value to update the angle by each tick.
129 var step = (endAngle - startAngle) / 131 var step =
130 (ANIMATE_DURATION_MS / ANIMATE_TICKS_MS); 132 (endAngle - startAngle) / (ANIMATE_DURATION_MS / ANIMATE_TICKS_MS);
131 var id = setInterval(doAnimate.bind(this), ANIMATE_TICKS_MS); 133 var id = setInterval(doAnimate.bind(this), ANIMATE_TICKS_MS);
132 // Circles on html canvas have 0 radians on the positive x-axis and go in 134 // Circles on html canvas have 0 radians on the positive x-axis and go in
133 // clockwise direction. We want to start at the top of the circle which is 135 // clockwise direction. We want to start at the top of the circle which is
134 // 3pi/2. 136 // 3pi/2.
135 var start = 3 * Math.PI / 2; 137 var start = 3 * Math.PI / 2;
136 138
137 // Function that is called every tick of the interval, draws the arc a bit 139 // Function that is called every tick of the interval, draws the arc a bit
138 // closer to the final destination each tick, until it reaches the final 140 // closer to the final destination each tick, until it reaches the final
139 // destination. 141 // destination.
140 function doAnimate() { 142 function doAnimate() {
141 if (currentAngle >= endAngle) 143 if (currentAngle >= endAngle)
142 clearInterval(id); 144 clearInterval(id);
143 145
144 // Clears the canvas and draws the new progress circle. 146 // Clears the canvas and draws the new progress circle.
145 this.clearCanvas(); 147 this.clearCanvas();
146 // Drawing two arcs to form a circle gives a nicer look than drawing an 148 // Drawing two arcs to form a circle gives a nicer look than drawing an
147 // arc on top of a circle. If |currentAngle| is 0, draw from |start| + 149 // arc on top of a circle. If |currentAngle| is 0, draw from |start| +
148 // |currentAngle| to 7 * Math.PI / 2 (start is 3 * Math.PI / 2) otherwise 150 // |currentAngle| to 7 * Math.PI / 2 (start is 3 * Math.PI / 2) otherwise
149 // the regular draw from |start| to |currentAngle| will draw nothing which 151 // the regular draw from |start| to |currentAngle| will draw nothing which
150 // will cause a flicker for one frame. 152 // will cause a flicker for one frame.
151 this.drawArc(start, start + currentAngle, 153 this.drawArc(
152 this.canvasCircleProgressColor_); 154 start, start + currentAngle, this.canvasCircleProgressColor_);
153 this.drawArc(start + currentAngle, 155 this.drawArc(
154 currentAngle <= 0 ? 7 * Math.PI / 2 : start, 156 start + currentAngle, currentAngle <= 0 ? 7 * Math.PI / 2 : start,
155 this.canvasCircleBackgroundColor_); 157 this.canvasCircleBackgroundColor_);
156 currentAngle += step; 158 currentAngle += step;
157 } 159 }
158 }, 160 },
159 161
160 /** 162 /**
161 * Clear the canvas of any renderings. 163 * Clear the canvas of any renderings.
162 */ 164 */
163 clearCanvas: function() { 165 clearCanvas: function() {
164 var c = this.$.canvas; 166 var c = this.$.canvas;
165 var ctx = c.getContext('2d'); 167 var ctx = c.getContext('2d');
166 ctx.clearRect(0, 0, c.width, c.height); 168 ctx.clearRect(0, 0, c.width, c.height);
167 }, 169 },
168 }); 170 });
169 })(); 171 })();
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698