OLD | NEW |
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 | 4 |
5 /** | 5 /** |
6 * @constructor | 6 * @constructor |
7 * @extends {WebInspector.VBox} | 7 * @extends {WebInspector.VBox} |
8 */ | 8 */ |
9 WebInspector.BezierEditor = function() | 9 WebInspector.BezierEditor = function() |
10 { | 10 { |
(...skipping 23 matching lines...) Expand all Loading... |
34 this._curveUI = new WebInspector.BezierUI(150, 250, 50, 7, true); | 34 this._curveUI = new WebInspector.BezierUI(150, 250, 50, 7, true); |
35 this._curve = this._outerContainer.createSVGChild("svg", "bezier-curve"); | 35 this._curve = this._outerContainer.createSVGChild("svg", "bezier-curve"); |
36 WebInspector.installDragHandle(this._curve, this._dragStart.bind(this), this
._dragMove.bind(this), this._dragEnd.bind(this), "default"); | 36 WebInspector.installDragHandle(this._curve, this._dragStart.bind(this), this
._dragMove.bind(this), this._dragEnd.bind(this), "default"); |
37 | 37 |
38 this._header = this.contentElement.createChild("div", "bezier-header"); | 38 this._header = this.contentElement.createChild("div", "bezier-header"); |
39 var minus = this._createPresetModifyIcon(this._header, "bezier-preset-minus"
, "M 12 6 L 8 10 L 12 14"); | 39 var minus = this._createPresetModifyIcon(this._header, "bezier-preset-minus"
, "M 12 6 L 8 10 L 12 14"); |
40 var plus = this._createPresetModifyIcon(this._header, "bezier-preset-plus",
"M 8 6 L 12 10 L 8 14"); | 40 var plus = this._createPresetModifyIcon(this._header, "bezier-preset-plus",
"M 8 6 L 12 10 L 8 14"); |
41 minus.addEventListener("click", this._presetModifyClicked.bind(this, false))
; | 41 minus.addEventListener("click", this._presetModifyClicked.bind(this, false))
; |
42 plus.addEventListener("click", this._presetModifyClicked.bind(this, true)); | 42 plus.addEventListener("click", this._presetModifyClicked.bind(this, true)); |
43 this._label = this._header.createChild("span", "source-code bezier-display-v
alue"); | 43 this._label = this._header.createChild("span", "source-code bezier-display-v
alue"); |
44 } | 44 }; |
45 | 45 |
46 /** @enum {symbol} */ | 46 /** @enum {symbol} */ |
47 WebInspector.BezierEditor.Events = { | 47 WebInspector.BezierEditor.Events = { |
48 BezierChanged: Symbol("BezierChanged") | 48 BezierChanged: Symbol("BezierChanged") |
49 } | 49 }; |
50 | 50 |
51 WebInspector.BezierEditor.Presets = [ | 51 WebInspector.BezierEditor.Presets = [ |
52 [ | 52 [ |
53 { name: "ease-in-out", value: "ease-in-out" }, | 53 { name: "ease-in-out", value: "ease-in-out" }, |
54 { name: "In Out · Sine", value: "cubic-bezier(0.45, 0.05, 0.55, 0.95)" }
, | 54 { name: "In Out · Sine", value: "cubic-bezier(0.45, 0.05, 0.55, 0.95)" }
, |
55 { name: "In Out · Quadratic", value: "cubic-bezier(0.46, 0.03, 0.52, 0.9
6)" }, | 55 { name: "In Out · Quadratic", value: "cubic-bezier(0.46, 0.03, 0.52, 0.9
6)" }, |
56 { name: "In Out · Cubic", value: "cubic-bezier(0.65, 0.05, 0.36, 1)" }, | 56 { name: "In Out · Cubic", value: "cubic-bezier(0.65, 0.05, 0.36, 1)" }, |
57 { name: "Fast Out, Slow In", value: "cubic-bezier(0.4, 0, 0.2, 1)" }, | 57 { name: "Fast Out, Slow In", value: "cubic-bezier(0.4, 0, 0.2, 1)" }, |
58 { name: "In Out · Back", value: "cubic-bezier(0.68, -0.55, 0.27, 1.55)"
} | 58 { name: "In Out · Back", value: "cubic-bezier(0.68, -0.55, 0.27, 1.55)"
} |
59 ], | 59 ], |
60 [ | 60 [ |
61 { name: "Fast Out, Linear In", value: "cubic-bezier(0.4, 0, 1, 1)" }, | 61 { name: "Fast Out, Linear In", value: "cubic-bezier(0.4, 0, 1, 1)" }, |
62 { name: "ease-in", value: "ease-in" }, | 62 { name: "ease-in", value: "ease-in" }, |
63 { name: "In · Sine", value: "cubic-bezier(0.47, 0, 0.75, 0.72)" }, | 63 { name: "In · Sine", value: "cubic-bezier(0.47, 0, 0.75, 0.72)" }, |
64 { name: "In · Quadratic", value: "cubic-bezier(0.55, 0.09, 0.68, 0.53)"
}, | 64 { name: "In · Quadratic", value: "cubic-bezier(0.55, 0.09, 0.68, 0.53)"
}, |
65 { name: "In · Cubic", value: "cubic-bezier(0.55, 0.06, 0.68, 0.19)" }, | 65 { name: "In · Cubic", value: "cubic-bezier(0.55, 0.06, 0.68, 0.19)" }, |
66 { name: "In · Back", value: "cubic-bezier(0.6, -0.28, 0.74, 0.05)" } | 66 { name: "In · Back", value: "cubic-bezier(0.6, -0.28, 0.74, 0.05)" } |
67 ], | 67 ], |
68 [ | 68 [ |
69 { name: "ease-out", value: "ease-out" }, | 69 { name: "ease-out", value: "ease-out" }, |
70 { name: "Out · Sine", value: "cubic-bezier(0.39, 0.58, 0.57, 1)" }, | 70 { name: "Out · Sine", value: "cubic-bezier(0.39, 0.58, 0.57, 1)" }, |
71 { name: "Out · Quadratic", value: "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
}, | 71 { name: "Out · Quadratic", value: "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
}, |
72 { name: "Out · Cubic", value: "cubic-bezier(0.22, 0.61, 0.36, 1)" }, | 72 { name: "Out · Cubic", value: "cubic-bezier(0.22, 0.61, 0.36, 1)" }, |
73 { name: "Linear Out, Slow In", value: "cubic-bezier(0, 0, 0.2, 1)" }, | 73 { name: "Linear Out, Slow In", value: "cubic-bezier(0, 0, 0.2, 1)" }, |
74 { name: "Out · Back", value: "cubic-bezier(0.18, 0.89, 0.32, 1.28)" } | 74 { name: "Out · Back", value: "cubic-bezier(0.18, 0.89, 0.32, 1.28)" } |
75 ] | 75 ] |
76 ] | 76 ]; |
77 | 77 |
78 /** @typedef {{presets: !Array.<{name: string, value: string}>, icon: !Element,
presetIndex: number}} */ | 78 /** @typedef {{presets: !Array.<{name: string, value: string}>, icon: !Element,
presetIndex: number}} */ |
79 WebInspector.BezierEditor.PresetCategory; | 79 WebInspector.BezierEditor.PresetCategory; |
80 | 80 |
81 WebInspector.BezierEditor.prototype = { | 81 WebInspector.BezierEditor.prototype = { |
82 /** | 82 /** |
83 * @param {?WebInspector.Geometry.CubicBezier} bezier | 83 * @param {?WebInspector.Geometry.CubicBezier} bezier |
84 */ | 84 */ |
85 setBezier: function(bezier) | 85 setBezier: function(bezier) |
86 { | 86 { |
(...skipping 185 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
272 for (var i = 0; i <= numberOnionSlices; i++) { | 272 for (var i = 0; i <= numberOnionSlices; i++) { |
273 var slice = this._previewOnion.createChild("div", "bezier-preview-an
imation"); | 273 var slice = this._previewOnion.createChild("div", "bezier-preview-an
imation"); |
274 var player = slice.animate([{ transform: "translateX(0px)", easing:
this._bezier.asCSSText() }, { transform: "translateX(218px)" }], | 274 var player = slice.animate([{ transform: "translateX(0px)", easing:
this._bezier.asCSSText() }, { transform: "translateX(218px)" }], |
275 { duration: animationDuration, fill: "forwards" }); | 275 { duration: animationDuration, fill: "forwards" }); |
276 player.pause(); | 276 player.pause(); |
277 player.currentTime = animationDuration * i / numberOnionSlices; | 277 player.currentTime = animationDuration * i / numberOnionSlices; |
278 } | 278 } |
279 }, | 279 }, |
280 | 280 |
281 __proto__: WebInspector.VBox.prototype | 281 __proto__: WebInspector.VBox.prototype |
282 } | 282 }; |
OLD | NEW |