mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-10 21:54:47 +08:00
Sigurd Schneider
6c774cae0e
The leading underscore is accepted for the time being because the automated JSDOC -> TS translation produces such identifiers, and renaming will take some time. We're not enfocing any convention on object literals, as they are used as arguments to library functions in some places, which might follow different styles. This CL also enforces PascalCase for interface, typeAlias, and typeParameter. Bug: chromium:1057042 Change-Id: I8decfae35a2231d8068ce50b230cb1866ec494da Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2692161 Commit-Queue: Sigurd Schneider <sigurds@chromium.org> Reviewed-by: Mathias Bynens <mathias@chromium.org> Reviewed-by: Peter Marshall <petermarshall@chromium.org>
79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
// Copyright (c) 2015 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
/* eslint-disable rulesdir/no_underscored_properties */
|
|
|
|
import * as UI from '../ui/ui.js';
|
|
import {AnimationGroup} from './AnimationModel.js'; // eslint-disable-line no-unused-vars
|
|
import {AnimationUI} from './AnimationUI.js';
|
|
|
|
export class AnimationGroupPreviewUI {
|
|
_model: AnimationGroup;
|
|
element: HTMLDivElement;
|
|
_removeButton: HTMLElement;
|
|
_replayOverlayElement: HTMLElement;
|
|
_svg: Element;
|
|
_viewBoxHeight: number;
|
|
|
|
constructor(model: AnimationGroup) {
|
|
this._model = model;
|
|
this.element = document.createElement('div');
|
|
this.element.classList.add('animation-buffer-preview');
|
|
this.element.createChild('div', 'animation-paused fill');
|
|
this._removeButton = this.element.createChild('div', 'animation-remove-button');
|
|
this._removeButton.textContent = '\u2715';
|
|
this._replayOverlayElement = this.element.createChild('div', 'animation-buffer-preview-animation');
|
|
this._svg = UI.UIUtils.createSVGChild(this.element, 'svg');
|
|
this._svg.setAttribute('width', '100%');
|
|
this._svg.setAttribute('preserveAspectRatio', 'none');
|
|
this._svg.setAttribute('height', '100%');
|
|
this._viewBoxHeight = 32;
|
|
this._svg.setAttribute('viewBox', '0 0 100 ' + this._viewBoxHeight);
|
|
this._svg.setAttribute('shape-rendering', 'crispEdges');
|
|
this._render();
|
|
}
|
|
|
|
_groupDuration(): number {
|
|
let duration = 0;
|
|
for (const anim of this._model.animations()) {
|
|
const animDuration = anim.source().delay() + anim.source().duration();
|
|
if (animDuration > duration) {
|
|
duration = animDuration;
|
|
}
|
|
}
|
|
return duration;
|
|
}
|
|
|
|
removeButton(): Element {
|
|
return this._removeButton;
|
|
}
|
|
|
|
replay(): void {
|
|
this._replayOverlayElement.animate(
|
|
[
|
|
{offset: 0, width: '0%', opacity: 1},
|
|
{offset: 0.9, width: '100%', opacity: 1},
|
|
{offset: 1, width: '100%', opacity: 0},
|
|
],
|
|
{duration: 200, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
|
|
}
|
|
|
|
_render(): void {
|
|
this._svg.removeChildren();
|
|
const maxToShow = 10;
|
|
const numberOfAnimations = Math.min(this._model.animations().length, maxToShow);
|
|
const timeToPixelRatio = 100 / Math.max(this._groupDuration(), 750);
|
|
for (let i = 0; i < numberOfAnimations; i++) {
|
|
const effect = this._model.animations()[i].source();
|
|
const line = UI.UIUtils.createSVGChild(this._svg, 'line') as SVGLineElement;
|
|
line.setAttribute('x1', String(effect.delay() * timeToPixelRatio));
|
|
line.setAttribute('x2', String((effect.delay() + effect.duration()) * timeToPixelRatio));
|
|
const y = String(Math.floor(this._viewBoxHeight / Math.max(6, numberOfAnimations) * i + 1));
|
|
line.setAttribute('y1', y);
|
|
line.setAttribute('y2', y);
|
|
line.style.stroke = AnimationUI.colorForAnimation(this._model.animations()[i]);
|
|
}
|
|
}
|
|
}
|