import*as UI from"../ui/ui.js";import{AnimationUI}from"./AnimationUI.js";export class AnimationGroupPreviewUI{constructor(t){this._model=t,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(){let t=0;for(const e of this._model.animations()){const i=e.source().delay()+e.source().duration();i>t&&(t=i)}return t}removeButton(){return this._removeButton}replay(){this._replayOverlayElement.animate([{offset:0,width:"0%",opacity:1},{offset:.9,width:"100%",opacity:1},{offset:1,width:"100%",opacity:0}],{duration:200,easing:"cubic-bezier(0, 0, 0.2, 1)"})}_render(){this._svg.removeChildren();const t=Math.min(this._model.animations().length,10),e=100/Math.max(this._groupDuration(),750);for(let i=0;i<t;i++){const s=this._model.animations()[i].source(),o=UI.UIUtils.createSVGChild(this._svg,"line");o.setAttribute("x1",String(s.delay()*e)),o.setAttribute("x2",String((s.delay()+s.duration())*e));const n=String(Math.floor(this._viewBoxHeight/Math.max(6,t)*i+1));o.setAttribute("y1",n),o.setAttribute("y2",n),o.style.stroke=AnimationUI.colorForAnimation(this._model.animations()[i])}}}