Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 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 |
| 3 | // found in the LICENSE file. |
Jack Franklin | 899893a | 2020-07-30 14:01:39 | [diff] [blame] | 4 | // @ts-nocheck |
| 5 | // TODO(crbug.com/1011811): Enable TypeScript compiler checks |
Paul Lewis | 752031f | 2020-01-09 14:14:23 | [diff] [blame] | 6 | |
Paul Lewis | 44e3757 | 2020-10-28 15:57:26 | [diff] [blame] | 7 | import * as UI from '../ui/ui.js'; |
Paul Lewis | 752031f | 2020-01-09 14:14:23 | [diff] [blame] | 8 | import {AnimationGroup} from './AnimationModel.js'; // eslint-disable-line no-unused-vars |
| 9 | import {AnimationUI} from './AnimationUI.js'; |
| 10 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 11 | /** |
| 12 | * @unrestricted |
| 13 | */ |
Paul Lewis | 752031f | 2020-01-09 14:14:23 | [diff] [blame] | 14 | export class AnimationGroupPreviewUI { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 15 | /** |
Paul Lewis | 752031f | 2020-01-09 14:14:23 | [diff] [blame] | 16 | * @param {!AnimationGroup} model |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 17 | */ |
| 18 | constructor(model) { |
| 19 | this._model = model; |
Tim van der Lippe | f49e232 | 2020-05-01 15:03:09 | [diff] [blame] | 20 | this.element = document.createElement('div'); |
| 21 | this.element.classList.add('animation-buffer-preview'); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 22 | this.element.createChild('div', 'animation-paused fill'); |
| 23 | this._removeButton = this.element.createChild('div', 'animation-remove-button'); |
| 24 | this._removeButton.textContent = '\u2715'; |
| 25 | this._replayOverlayElement = this.element.createChild('div', 'animation-buffer-preview-animation'); |
Paul Lewis | 44e3757 | 2020-10-28 15:57:26 | [diff] [blame] | 26 | this._svg = UI.UIUtils.createSVGChild(this.element, 'svg'); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 27 | this._svg.setAttribute('width', '100%'); |
| 28 | this._svg.setAttribute('preserveAspectRatio', 'none'); |
| 29 | this._svg.setAttribute('height', '100%'); |
| 30 | this._viewBoxHeight = 32; |
| 31 | this._svg.setAttribute('viewBox', '0 0 100 ' + this._viewBoxHeight); |
| 32 | this._svg.setAttribute('shape-rendering', 'crispEdges'); |
| 33 | this._render(); |
| 34 | } |
| 35 | |
| 36 | /** |
| 37 | * @return {number} |
| 38 | */ |
| 39 | _groupDuration() { |
| 40 | let duration = 0; |
| 41 | for (const anim of this._model.animations()) { |
| 42 | const animDuration = anim.source().delay() + anim.source().duration(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 43 | if (animDuration > duration) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 44 | duration = animDuration; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 45 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 46 | } |
| 47 | return duration; |
| 48 | } |
| 49 | |
| 50 | /** |
| 51 | * @return {!Element} |
| 52 | */ |
| 53 | removeButton() { |
| 54 | return this._removeButton; |
| 55 | } |
| 56 | |
| 57 | replay() { |
| 58 | this._replayOverlayElement.animate( |
| 59 | [ |
| 60 | {offset: 0, width: '0%', opacity: 1}, {offset: 0.9, width: '100%', opacity: 1}, |
| 61 | {offset: 1, width: '100%', opacity: 0} |
| 62 | ], |
| 63 | {duration: 200, easing: 'cubic-bezier(0, 0, 0.2, 1)'}); |
| 64 | } |
| 65 | |
| 66 | _render() { |
| 67 | this._svg.removeChildren(); |
| 68 | const maxToShow = 10; |
| 69 | const numberOfAnimations = Math.min(this._model.animations().length, maxToShow); |
| 70 | const timeToPixelRatio = 100 / Math.max(this._groupDuration(), 750); |
| 71 | for (let i = 0; i < numberOfAnimations; i++) { |
| 72 | const effect = this._model.animations()[i].source(); |
Paul Lewis | 44e3757 | 2020-10-28 15:57:26 | [diff] [blame] | 73 | const line = UI.UIUtils.createSVGChild(this._svg, 'line'); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 74 | line.setAttribute('x1', effect.delay() * timeToPixelRatio); |
| 75 | line.setAttribute('x2', (effect.delay() + effect.duration()) * timeToPixelRatio); |
| 76 | const y = Math.floor(this._viewBoxHeight / Math.max(6, numberOfAnimations) * i + 1); |
| 77 | line.setAttribute('y1', y); |
| 78 | line.setAttribute('y2', y); |
Paul Lewis | 752031f | 2020-01-09 14:14:23 | [diff] [blame] | 79 | line.style.stroke = AnimationUI.Color(this._model.animations()[i]); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 80 | } |
| 81 | } |
Paul Lewis | 4962e2a | 2019-11-19 14:20:16 | [diff] [blame] | 82 | } |