@yuebai008/cli/dist/cli-server/client/front_end/panels/animation/AnimationUI.js

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as Host from"../../core/host/host.js";import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as InlineEditor from"../../ui/legacy/components/inline_editor/inline_editor.js";import*as UI from"../../ui/legacy/legacy.js";import{StepTimingFunction}from"./AnimationTimeline.js";const UIStrings={animationEndpointSlider:"Animation Endpoint slider",animationKeyframeSlider:"Animation Keyframe slider",sSlider:"{PH1} slider"},str_=i18n.i18n.registerUIStrings("panels/animation/AnimationUI.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class AnimationUI{#t;#e;#i;#n;#s;#o;#a;#r;#m;#l;#h;#d;#c;#u;#y;#p;#f;constructor(t,e,i){this.#t=t,this.#e=e;const n=this.#t.source().keyframesRule();n&&(this.#i=n.keyframes()),this.#n=i.createChild("div","animation-name"),this.#n.textContent=this.#t.name(),this.#s=UI.UIUtils.createSVGChild(i,"svg","animation-ui"),this.#s.setAttribute("height",Options.AnimationSVGHeight.toString()),this.#s.style.marginLeft="-"+Options.AnimationMargin+"px",this.#s.addEventListener("contextmenu",this.onContextMenu.bind(this)),this.#o=UI.UIUtils.createSVGChild(this.#s,"g"),UI.UIUtils.installDragHandle(this.#o,this.mouseDown.bind(this,"AnimationDrag",null),this.mouseMove.bind(this),this.mouseUp.bind(this),"-webkit-grabbing","-webkit-grab"),AnimationUI.installDragHandleKeyboard(this.#o,this.keydownMove.bind(this,"AnimationDrag",null)),this.#a=[],this.#r=0,this.#m=50,this.#l=AnimationUI.colorForAnimation(this.#t)}static colorForAnimation(t){const e=Array.from(Colors.keys()),i=e[Platform.StringUtilities.hashCode(t.name()||t.id())%e.length],n=Colors.get(i);if(!n)throw new Error("Unable to locate color");return n.asString("rgb")||""}static installDragHandleKeyboard(t,e){t.addEventListener("keydown",e,!1)}animation(){return this.#t}get nameElement(){return this.#n}get svg(){return this.#s}setNode(t){this.#h=t}createLine(t,e){const i=UI.UIUtils.createSVGChild(t,"line",e);return i.setAttribute("x1",Options.AnimationMargin.toString()),i.setAttribute("y1",Options.AnimationHeight.toString()),i.setAttribute("y2",Options.AnimationHeight.toString()),i.style.stroke=this.#l,i}drawAnimationLine(t,e){const i=this.#a[t];i.animationLine||(i.animationLine=this.createLine(e,"animation-line")),i.animationLine&&i.animationLine.setAttribute("x2",(this.duration()*this.#e.pixelMsRatio()+Options.AnimationMargin).toFixed(2))}drawDelayLine(t){this.#d&&this.#c||(this.#d=this.createLine(t,"animation-delay-line"),this.#c=this.createLine(t,"animation-delay-line"));const e=this.#t.source().fill();this.#d.classList.toggle("animation-fill","backwards"===e||"both"===e);const i=Options.AnimationMargin;this.#d.setAttribute("x1",i.toString()),this.#d.setAttribute("x2",(this.delay()*this.#e.pixelMsRatio()+i).toFixed(2));const n="forwards"===e||"both"===e;this.#c.classList.toggle("animation-fill",n);const s=Math.min(this.#e.width(),(this.delay()+this.duration()*this.#t.source().iterations())*this.#e.pixelMsRatio());this.#c.style.transform="translateX("+s.toFixed(2)+"px)",this.#c.setAttribute("x1",i.toString()),this.#c.setAttribute("x2",n?(this.#e.width()-s+i).toFixed(2):(this.#t.source().endDelay()*this.#e.pixelMsRatio()+i).toFixed(2))}drawPoint(t,e,i,n,s){if(this.#a[t].keyframePoints[n])return void this.#a[t].keyframePoints[n].setAttribute("cx",i.toFixed(2));const o=UI.UIUtils.createSVGChild(e,"circle",n<=0?"animation-endpoint":"animation-keyframe-point");if(o.setAttribute("cx",i.toFixed(2)),o.setAttribute("cy",Options.AnimationHeight.toString()),o.style.stroke=this.#l,o.setAttribute("r",(Options.AnimationMargin/2).toString()),o.tabIndex=0,UI.ARIAUtils.setLabel(o,i18nString(n<=0?UIStrings.animationEndpointSlider:UIStrings.animationKeyframeSlider)),n<=0&&(o.style.fill=this.#l),this.#a[t].keyframePoints[n]=o,!s)return;let a;a=0===n?"StartEndpointMove":-1===n?"FinishEndpointMove":"KeyframeMove",UI.UIUtils.installDragHandle(o,this.mouseDown.bind(this,a,n),this.mouseMove.bind(this),this.mouseUp.bind(this),"ew-resize"),AnimationUI.installDragHandleKeyboard(o,this.keydownMove.bind(this,a,n))}renderKeyframe(t,e,i,n,s,o){function a(t,e,i){const n=UI.UIUtils.createSVGChild(t,"line");n.setAttribute("x1",e.toString()),n.setAttribute("x2",e.toString()),n.setAttribute("y1",Options.AnimationMargin.toString()),n.setAttribute("y2",Options.AnimationHeight.toString()),n.style.stroke=i}const r=UI.Geometry.CubicBezier.parse(o),m=this.#a[t].keyframeRender;if(!m[e]){const t=r?UI.UIUtils.createSVGChild(i,"path","animation-keyframe"):UI.UIUtils.createSVGChild(i,"g","animation-keyframe-step");m[e]=t}const l=m[e];if(l.tabIndex=0,UI.ARIAUtils.setLabel(l,i18nString(UIStrings.sSlider,{PH1:this.#t.name()})),l.style.transform="translateX("+n.toFixed(2)+"px)","linear"===o){l.style.fill=this.#l;const t=InlineEditor.BezierUI.Height;l.setAttribute("d",["M",0,t,"L",0,5,"L",s.toFixed(2),5,"L",s.toFixed(2),t,"Z"].join(" "))}else if(r)l.style.fill=this.#l,InlineEditor.BezierUI.BezierUI.drawVelocityChart(r,l,s);else{const t=StepTimingFunction.parse(o);l.removeChildren();if(t){const e={start:0,middle:.5,end:1}[t.stepAtPosition];for(let i=0;i<t.steps;i++)a(l,(i+e)*s/t.steps,this.#l)}}}redraw(){const t=this.#e.width()-Options.AnimationMargin;if(this.#s.setAttribute("width",(t+2*Options.AnimationMargin).toFixed(2)),this.#o.style.transform="translateX("+(this.delay()*this.#e.pixelMsRatio()).toFixed(2)+"px)",this.#n.style.transform="translateX("+(this.delay()*this.#e.pixelMsRatio()+Options.AnimationMargin).toFixed(2)+"px)",this.#n.style.width=(this.duration()*this.#e.pixelMsRatio()).toFixed(2)+"px",this.drawDelayLine(this.#s),"CSSTransition"===this.#t.type())return void this.renderTransition();this.renderIteration(this.#o,0),this.#u||(this.#u=UI.UIUtils.createSVGChild(this.#o,"g","animation-tail-iterations"));const e=this.duration()*this.#e.pixelMsRatio();let i;for(i=1;i<this.#t.source().iterations()&&e*(i-1)<this.#e.width()&&(e>0||this.#t.source().iterations()!==1/0);i++)this.renderIteration(this.#u,i);for(;i<this.#a.length;){const t=this.#a.pop();t&&t.group&&t.group.remove()}}renderTransition(){const t=this.#o;this.#a[0]||(this.#a[0]={animationLine:null,keyframePoints:{},keyframeRender:{},group:null}),this.drawAnimationLine(0,t),this.renderKeyframe(0,0,t,Options.AnimationMargin,this.duration()*this.#e.pixelMsRatio(),this.#t.source().easing()),this.drawPoint(0,t,Options.AnimationMargin,0,!0),this.drawPoint(0,t,this.duration()*this.#e.pixelMsRatio()+Options.AnimationMargin,-1,!0)}renderIteration(t,e){this.#a[e]||(this.#a[e]={animationLine:null,keyframePoints:{},keyframeRender:{},group:UI.UIUtils.createSVGChild(t,"g")});const i=this.#a[e].group;if(i){if(i.style.transform="translateX("+(e*this.duration()*this.#e.pixelMsRatio()).toFixed(2)+"px)",this.drawAnimationLine(e,i),this.#i&&this.#i.length>1)for(let t=0;t<this.#i.length-1;t++){const n=this.offset(t)*this.duration()*this.#e.pixelMsRatio()+Options.AnimationMargin,s=this.duration()*(this.offset(t+1)-this.offset(t))*this.#e.pixelMsRatio();this.renderKeyframe(e,t,i,n,s,this.#i[t].easing()),(t||!t&&0===e)&&this.drawPoint(e,i,n,t,0===e)}this.drawPoint(e,i,this.duration()*this.#e.pixelMsRatio()+Options.AnimationMargin,-1,0===e)}}delay(){let t=this.#t.source().delay();return"AnimationDrag"!==this.#y&&"StartEndpointMove"!==this.#y||(t+=this.#r),Math.max(0,t)}duration(){let t=this.#t.source().duration();return"FinishEndpointMove"===this.#y?t+=this.#r:"StartEndpointMove"===this.#y&&(t-=Math.max(this.#r,-this.#t.source().delay())),Math.max(0,t)}offset(t){if(!this.#i)throw new Error("Unable to calculate offset; keyframes do not exist");let e=this.#i[t].offsetAsNumber();return"KeyframeMove"===this.#y&&t===this.#p&&(console.assert(t>0&&t<this.#i.length-1,"First and last keyframe cannot be moved"),e+=this.#r/this.#t.source().duration(),e=Math.max(e,this.#i[t-1].offsetAsNumber()),e=Math.min(e,this.#i[t+1].offsetAsNumber())),e}mouseDown(t,e,i){const n=i;if(2===n.buttons)return!1;if(this.#s.enclosingNodeOrSelfWithClass("animation-node-removed"))return!1;this.#y=t,this.#p=e,this.#f=n.clientX,i.consume(!0);const s=UI.ViewManager.ViewManager.instance(),o=s.locationNameForViewId("animations"),a=s.locationNameForViewId("elements");return this.#h&&o!==a&&Common.Revealer.reveal(this.#h),!0}mouseMove(t){const e=t;this.setMovementAndRedraw((e.clientX-(this.#f||0))/this.#e.pixelMsRatio())}setMovementAndRedraw(t){this.#r=t,this.delay()+this.duration()>.8*this.#e.duration()&&this.#e.setDuration(1.2*this.#e.duration()),this.redraw()}mouseUp(t){const e=t;this.#r=(e.clientX-(this.#f||0))/this.#e.pixelMsRatio(),"KeyframeMove"===this.#y?this.#i&&null!==this.#p&&void 0!==this.#p&&this.#i[this.#p].setOffset(this.offset(this.#p)):this.#t.setTiming(this.duration(),this.delay()),Host.userMetrics.animationPointDragged("AnimationDrag"===this.#y?0:"KeyframeMove"===this.#y?1:"StartEndpointMove"===this.#y?2:"FinishEndpointMove"===this.#y?3:4),this.#r=0,this.redraw(),this.#y=void 0,this.#f=void 0,this.#p=void 0}keydownMove(t,e,i){const n=i;switch(this.#y=t,this.#p=e,n.key){case"ArrowLeft":case"ArrowUp":this.#r=-this.#m;break;case"ArrowRight":case"ArrowDown":this.#r=this.#m;break;default:return}"KeyframeMove"===this.#y?this.#i&&null!==this.#p&&this.#i[this.#p].setOffset(this.offset(this.#p)):this.#t.setTiming(this.duration(),this.delay()),this.setMovementAndRedraw(0),this.#y=void 0,this.#p=void 0,i.consume(!0)}onContextMenu(t){this.#t.remoteObjectPromise().then((function(e){if(!e)return;const i=new UI.ContextMenu.ContextMenu(t);i.appendApplicableItems(e),i.show()})),t.consume(!0)}}export const Options={AnimationHeight:26,AnimationSVGHeight:50,AnimationMargin:7,EndpointsClickRegionSize:10,GridCanvasHeight:40};export const Colors=new Map([["Purple",Common.Color.parse("#9C27B0")],["Light Blue",Common.Color.parse("#03A9F4")],["Deep Orange",Common.Color.parse("#FF5722")],["Blue",Common.Color.parse("#5677FC")],["Lime",Common.Color.parse("#CDDC39")],["Blue Grey",Common.Color.parse("#607D8B")],["Pink",Common.Color.parse("#E91E63")],["Green",Common.Color.parse("#0F9D58")],["Brown",Common.Color.parse("#795548")],["Cyan",Common.Color.parse("#00BCD4")]]);