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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/ui/BezierUI.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done Created 4 years, 1 month 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 (c) 2015 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2015 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
5 /** 4 /**
6 * @constructor 5 * @unrestricted
7 * @param {number} width
8 * @param {number} height
9 * @param {number} marginTop
10 * @param {number} controlPointRadius
11 * @param {boolean} linearLine
12 */ 6 */
13 WebInspector.BezierUI = function(width, height, marginTop, controlPointRadius, l inearLine) 7 WebInspector.BezierUI = class {
14 { 8 /**
9 * @param {number} width
10 * @param {number} height
11 * @param {number} marginTop
12 * @param {number} controlPointRadius
13 * @param {boolean} linearLine
14 */
15 constructor(width, height, marginTop, controlPointRadius, linearLine) {
15 this.width = width; 16 this.width = width;
16 this.height = height; 17 this.height = height;
17 this.marginTop = marginTop; 18 this.marginTop = marginTop;
18 this.radius = controlPointRadius; 19 this.radius = controlPointRadius;
19 this.linearLine = linearLine; 20 this.linearLine = linearLine;
20 }; 21 }
21 22
22 WebInspector.BezierUI.prototype = { 23 /**
23 /** 24 * @param {!WebInspector.Geometry.CubicBezier} bezier
24 * @return {number} 25 * @param {!Element} path
25 */ 26 * @param {number} width
26 curveWidth: function() 27 */
27 { 28 static drawVelocityChart(bezier, path, width) {
28 return this.width - this.radius * 2; 29 var height = WebInspector.BezierUI.Height;
29 }, 30 var pathBuilder = ['M', 0, height];
31 /** @const */ var sampleSize = 1 / 40;
30 32
31 /** 33 var prev = bezier.evaluateAt(0);
32 * @return {number} 34 for (var t = sampleSize; t < 1 + sampleSize; t += sampleSize) {
33 */ 35 var current = bezier.evaluateAt(t);
34 curveHeight: function() 36 var slope = (current.y - prev.y) / (current.x - prev.x);
35 { 37 var weightedX = prev.x * (1 - t) + current.x * t;
36 return this.height - this.radius * 2 - this.marginTop * 2; 38 slope = Math.tanh(slope / 1.5); // Normalise slope
37 }, 39 pathBuilder = pathBuilder.concat(['L', (weightedX * width).toFixed(2), (he ight - slope * height).toFixed(2)]);
40 prev = current;
41 }
42 pathBuilder = pathBuilder.concat(['L', width.toFixed(2), height, 'Z']);
43 path.setAttribute('d', pathBuilder.join(' '));
44 }
38 45
39 /** 46 /**
40 * @param {!Element} parentElement 47 * @return {number}
41 * @param {string} className 48 */
42 * @param {number} x1 49 curveWidth() {
43 * @param {number} y1 50 return this.width - this.radius * 2;
44 * @param {number} x2 51 }
45 * @param {number} y2
46 */
47 _drawLine: function(parentElement, className, x1, y1, x2, y2)
48 {
49 var line = parentElement.createSVGChild("line", className);
50 line.setAttribute("x1", x1 + this.radius);
51 line.setAttribute("y1", y1 + this.radius + this.marginTop);
52 line.setAttribute("x2", x2 + this.radius);
53 line.setAttribute("y2", y2 + this.radius + this.marginTop);
54 },
55 52
56 /** 53 /**
57 * @param {!Element} parentElement 54 * @return {number}
58 * @param {number} startX 55 */
59 * @param {number} startY 56 curveHeight() {
60 * @param {number} controlX 57 return this.height - this.radius * 2 - this.marginTop * 2;
61 * @param {number} controlY 58 }
62 */
63 _drawControlPoints: function(parentElement, startX, startY, controlX, contro lY)
64 {
65 this._drawLine(parentElement, "bezier-control-line", startX, startY, con trolX, controlY);
66 var circle = parentElement.createSVGChild("circle", "bezier-control-circ le");
67 circle.setAttribute("cx", controlX + this.radius);
68 circle.setAttribute("cy", controlY + this.radius + this.marginTop);
69 circle.setAttribute("r", this.radius);
70 },
71 59
72 /** 60 /**
73 * @param {?WebInspector.Geometry.CubicBezier} bezier 61 * @param {!Element} parentElement
74 * @param {!Element} svg 62 * @param {string} className
75 */ 63 * @param {number} x1
76 drawCurve: function(bezier, svg) 64 * @param {number} y1
77 { 65 * @param {number} x2
78 if (!bezier) 66 * @param {number} y2
79 return; 67 */
80 var width = this.curveWidth(); 68 _drawLine(parentElement, className, x1, y1, x2, y2) {
81 var height = this.curveHeight(); 69 var line = parentElement.createSVGChild('line', className);
82 svg.setAttribute("width", this.width); 70 line.setAttribute('x1', x1 + this.radius);
83 svg.setAttribute("height", this.height); 71 line.setAttribute('y1', y1 + this.radius + this.marginTop);
84 svg.removeChildren(); 72 line.setAttribute('x2', x2 + this.radius);
85 var group = svg.createSVGChild("g"); 73 line.setAttribute('y2', y2 + this.radius + this.marginTop);
74 }
86 75
87 if (this.linearLine) 76 /**
88 this._drawLine(group, "linear-line", 0, height, width, 0); 77 * @param {!Element} parentElement
78 * @param {number} startX
79 * @param {number} startY
80 * @param {number} controlX
81 * @param {number} controlY
82 */
83 _drawControlPoints(parentElement, startX, startY, controlX, controlY) {
84 this._drawLine(parentElement, 'bezier-control-line', startX, startY, control X, controlY);
85 var circle = parentElement.createSVGChild('circle', 'bezier-control-circle') ;
86 circle.setAttribute('cx', controlX + this.radius);
87 circle.setAttribute('cy', controlY + this.radius + this.marginTop);
88 circle.setAttribute('r', this.radius);
89 }
89 90
90 var curve = group.createSVGChild("path", "bezier-path"); 91 /**
91 var curvePoints = [ 92 * @param {?WebInspector.Geometry.CubicBezier} bezier
92 new WebInspector.Geometry.Point(bezier.controlPoints[0].x * width + this.radius, (1 - bezier.controlPoints[0].y) * height + this.radius + this.margi nTop), 93 * @param {!Element} svg
93 new WebInspector.Geometry.Point(bezier.controlPoints[1].x * width + this.radius, (1 - bezier.controlPoints[1].y) * height + this.radius + this.margi nTop), 94 */
94 new WebInspector.Geometry.Point(width + this.radius, this.marginTop + this.radius) 95 drawCurve(bezier, svg) {
95 ]; 96 if (!bezier)
96 curve.setAttribute("d", "M" + this.radius + "," + (height + this.radius + this.marginTop) + " C" + curvePoints.join(" ")); 97 return;
98 var width = this.curveWidth();
99 var height = this.curveHeight();
100 svg.setAttribute('width', this.width);
101 svg.setAttribute('height', this.height);
102 svg.removeChildren();
103 var group = svg.createSVGChild('g');
97 104
98 this._drawControlPoints(group, 0, height, bezier.controlPoints[0].x * wi dth, (1 - bezier.controlPoints[0].y) * height); 105 if (this.linearLine)
99 this._drawControlPoints(group, width, 0, bezier.controlPoints[1].x * wid th, (1 - bezier.controlPoints[1].y) * height); 106 this._drawLine(group, 'linear-line', 0, height, width, 0);
100 } 107
108 var curve = group.createSVGChild('path', 'bezier-path');
109 var curvePoints = [
110 new WebInspector.Geometry.Point(
111 bezier.controlPoints[0].x * width + this.radius,
112 (1 - bezier.controlPoints[0].y) * height + this.radius + this.marginTo p),
113 new WebInspector.Geometry.Point(
114 bezier.controlPoints[1].x * width + this.radius,
115 (1 - bezier.controlPoints[1].y) * height + this.radius + this.marginTo p),
116 new WebInspector.Geometry.Point(width + this.radius, this.marginTop + this .radius)
117 ];
118 curve.setAttribute(
119 'd', 'M' + this.radius + ',' + (height + this.radius + this.marginTop) + ' C' + curvePoints.join(' '));
120
121 this._drawControlPoints(
122 group, 0, height, bezier.controlPoints[0].x * width, (1 - bezier.control Points[0].y) * height);
123 this._drawControlPoints(
124 group, width, 0, bezier.controlPoints[1].x * width, (1 - bezier.controlP oints[1].y) * height);
125 }
101 }; 126 };
102 127
103 WebInspector.BezierUI.Height = 26; 128 WebInspector.BezierUI.Height = 26;
104 129
105 /**
106 * @param {!WebInspector.Geometry.CubicBezier} bezier
107 * @param {!Element} path
108 * @param {number} width
109 */
110 WebInspector.BezierUI.drawVelocityChart = function(bezier, path, width)
111 {
112 var height = WebInspector.BezierUI.Height;
113 var pathBuilder = ["M", 0, height];
114 /** @const */ var sampleSize = 1 / 40;
115 130
116 var prev = bezier.evaluateAt(0);
117 for (var t = sampleSize; t < 1 + sampleSize; t += sampleSize) {
118 var current = bezier.evaluateAt(t);
119 var slope = (current.y - prev.y) / (current.x - prev.x);
120 var weightedX = prev.x * (1 - t) + current.x * t;
121 slope = Math.tanh(slope / 1.5); // Normalise slope
122 pathBuilder = pathBuilder.concat(["L", (weightedX * width).toFixed(2), ( height - slope * height).toFixed(2) ]);
123 prev = current;
124 }
125 pathBuilder = pathBuilder.concat(["L", width.toFixed(2), height, "Z"]);
126 path.setAttribute("d", pathBuilder.join(" "));
127 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698