blob: 97facd6c7a53f09a77d8905b52d5ae40b73b4121 [file] [log] [blame]
Blink Reformat4c46d092018-04-07 15:32:371// 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 Franklin899893a2020-07-30 14:01:394// @ts-nocheck
5// TODO(crbug.com/1011811): Enable TypeScript compiler checks
Paul Lewis752031f2020-01-09 14:14:236
Paul Lewis44e37572020-10-28 15:57:267import * as UI from '../ui/ui.js';
Paul Lewis752031f2020-01-09 14:14:238import {AnimationGroup} from './AnimationModel.js'; // eslint-disable-line no-unused-vars
9import {AnimationUI} from './AnimationUI.js';
10
Blink Reformat4c46d092018-04-07 15:32:3711/**
12 * @unrestricted
13 */
Paul Lewis752031f2020-01-09 14:14:2314export class AnimationGroupPreviewUI {
Blink Reformat4c46d092018-04-07 15:32:3715 /**
Paul Lewis752031f2020-01-09 14:14:2316 * @param {!AnimationGroup} model
Blink Reformat4c46d092018-04-07 15:32:3717 */
18 constructor(model) {
19 this._model = model;
Tim van der Lippef49e2322020-05-01 15:03:0920 this.element = document.createElement('div');
21 this.element.classList.add('animation-buffer-preview');
Blink Reformat4c46d092018-04-07 15:32:3722 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 Lewis44e37572020-10-28 15:57:2626 this._svg = UI.UIUtils.createSVGChild(this.element, 'svg');
Blink Reformat4c46d092018-04-07 15:32:3727 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 Lippe1d6e57a2019-09-30 11:55:3443 if (animDuration > duration) {
Blink Reformat4c46d092018-04-07 15:32:3744 duration = animDuration;
Tim van der Lippe1d6e57a2019-09-30 11:55:3445 }
Blink Reformat4c46d092018-04-07 15:32:3746 }
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 Lewis44e37572020-10-28 15:57:2673 const line = UI.UIUtils.createSVGChild(this._svg, 'line');
Blink Reformat4c46d092018-04-07 15:32:3774 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 Lewis752031f2020-01-09 14:14:2379 line.style.stroke = AnimationUI.Color(this._model.animations()[i]);
Blink Reformat4c46d092018-04-07 15:32:3780 }
81 }
Paul Lewis4962e2a2019-11-19 14:20:1682}