@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 1.64 kB
JavaScript
import*as UI from"../../ui/legacy/legacy.js";import{AnimationUI}from"./AnimationUI.js";export class AnimationGroupPreviewUI{#t;element;#e;#i;#n;#s;constructor(t){this.#t=t,this.element=document.createElement("div"),this.element.classList.add("animation-buffer-preview"),this.element.createChild("div","animation-paused fill"),this.#e=this.element.createChild("div","animation-remove-button"),this.#e.textContent="✕",this.#i=this.element.createChild("div","animation-buffer-preview-animation"),this.#n=UI.UIUtils.createSVGChild(this.element,"svg"),this.#n.setAttribute("width","100%"),this.#n.setAttribute("preserveAspectRatio","none"),this.#n.setAttribute("height","100%"),this.#s=32,this.#n.setAttribute("viewBox","0 0 100 "+this.#s),this.#n.setAttribute("shape-rendering","crispEdges"),this.render()}groupDuration(){let t=0;for(const e of this.#t.animations()){const i=e.source().delay()+e.source().duration();i>t&&(t=i)}return t}removeButton(){return this.#e}replay(){this.#i.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.#n.removeChildren();const t=Math.min(this.#t.animations().length,10),e=100/Math.max(this.groupDuration(),750);for(let i=0;i<t;i++){const n=this.#t.animations()[i].source(),s=UI.UIUtils.createSVGChild(this.#n,"line");s.setAttribute("x1",String(n.delay()*e)),s.setAttribute("x2",String((n.delay()+n.duration())*e));const o=String(Math.floor(this.#s/Math.max(6,t)*i+1));s.setAttribute("y1",o),s.setAttribute("y2",o),s.style.stroke=AnimationUI.colorForAnimation(this.#t.animations()[i])}}}