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

Command line interface for rapid qg-minigame development

import*as SDK from"../../core/sdk/sdk.js";export class AnimationModel extends SDK.SDKModel.SDKModel{runtimeModel;agent;#e;animationGroups;#t;playbackRate;#n;#i;constructor(e){super(e),this.runtimeModel=e.model(SDK.RuntimeModel.RuntimeModel),this.agent=e.animationAgent(),e.registerAnimationDispatcher(new AnimationDispatcher(this)),this.#e=new Map,this.animationGroups=new Map,this.#t=new Set,this.playbackRate=1;e.model(SDK.ResourceTreeModel.ResourceTreeModel).addEventListener(SDK.ResourceTreeModel.Events.PrimaryPageChanged,this.reset,this);const t=e.model(SDK.ScreenCaptureModel.ScreenCaptureModel);t&&(this.#n=new ScreenshotCapture(this,t))}reset(){this.#e.clear(),this.animationGroups.clear(),this.#t.clear(),this.dispatchEventToListeners(Events.ModelReset)}animationCreated(e){this.#t.add(e)}animationCanceled(e){this.#t.delete(e),this.flushPendingAnimationsIfNeeded()}animationStarted(e){if(!e.source||!e.source.backendNodeId)return;const t=AnimationImpl.parsePayload(this,e);if(!t)return;const n=t.source().keyframesRule();"WebAnimation"===t.type()&&n&&0===n.keyframes().length?this.#t.delete(t.id()):(this.#e.set(t.id(),t),this.#t.add(t.id())),this.flushPendingAnimationsIfNeeded()}flushPendingAnimationsIfNeeded(){for(const e of this.#t)if(!this.#e.get(e))return;for(;this.#t.size;)this.matchExistingGroups(this.createGroupFromPendingAnimations())}matchExistingGroups(e){let t=null;for(const n of this.animationGroups.values())if(n.matches(e)){t=n,n.update(e);break}return t||(this.animationGroups.set(e.id(),e),this.#n&&this.#n.captureScreenshots(e.finiteDuration(),e.screenshotsInternal)),this.dispatchEventToListeners(Events.AnimationGroupStarted,t||e),Boolean(t)}createGroupFromPendingAnimations(){console.assert(this.#t.size>0);const e=this.#t.values().next().value;this.#t.delete(e);const t=this.#e.get(e);if(!t)throw new Error("Unable to locate first animation");const n=[t],i=t.startTime(),a=new Set;for(const e of this.#t){const t=this.#e.get(e);t.startTime()===i?n.push(t):a.add(e)}return this.#t=a,new AnimationGroup(this,e,n)}setPlaybackRate(e){this.playbackRate=e,this.agent.invoke_setPlaybackRate({playbackRate:e})}releaseAnimations(e){this.agent.invoke_releaseAnimations({animations:e})}async suspendModel(){this.reset(),await this.agent.invoke_disable()}async resumeModel(){this.#i&&await this.agent.invoke_enable()}async ensureEnabled(){this.#i||(await this.agent.invoke_enable(),this.#i=!0)}}export var Events;!function(e){e.AnimationGroupStarted="AnimationGroupStarted",e.ModelReset="ModelReset"}(Events||(Events={}));export class AnimationImpl{#a;#s;#r;#o;constructor(e,t){this.#a=e,this.#s=t,this.#r=new AnimationEffect(e,this.#s.source)}static parsePayload(e,t){return new AnimationImpl(e,t)}payload(){return this.#s}id(){return this.#s.id}name(){return this.#s.name}paused(){return this.#s.pausedState}playState(){return this.#o||this.#s.playState}setPlayState(e){this.#o=e}playbackRate(){return this.#s.playbackRate}startTime(){return this.#s.startTime}endTime(){return this.source().iterations?this.startTime()+this.source().delay()+this.source().duration()*this.source().iterations()+this.source().endDelay():1/0}finiteDuration(){const e=Math.min(this.source().iterations(),3);return this.source().delay()+this.source().duration()*e}currentTime(){return this.#s.currentTime}source(){return this.#r}type(){return this.#s.type}overlaps(e){if(!this.source().iterations()||!e.source().iterations())return!0;const t=this.startTime()<e.startTime()?this:e,n=t===this?e:this;return t.endTime()>=n.startTime()}setTiming(e,t){this.#r.node().then((n=>{if(!n)throw new Error("Unable to find node");this.updateNodeStyle(e,t,n)})),this.#r.durationInternal=e,this.#r.delayInternal=t,this.#a.agent.invoke_setTiming({animationId:this.id(),duration:e,delay:t})}updateNodeStyle(e,t,n){let i;if("CSSTransition"===this.type())i="transition-";else{if("CSSAnimation"!==this.type())return;i="animation-"}if(!n.id)throw new Error("Node has no id");const a=n.domModel().cssModel();a.setEffectivePropertyValueForNode(n.id,i+"duration",e+"ms"),a.setEffectivePropertyValueForNode(n.id,i+"delay",t+"ms")}async remoteObjectPromise(){const e=await this.#a.agent.invoke_resolveAnimation({animationId:this.id()});return e?this.#a.runtimeModel.createRemoteObject(e.remoteObject):null}cssId(){return this.#s.cssId||""}}export class AnimationEffect{#a;#d;#l;delayInternal;durationInternal;#h;constructor(e,t){this.#a=e,this.#d=t,t.keyframesRule&&(this.#l=new KeyframesRule(t.keyframesRule)),this.delayInternal=this.#d.delay,this.durationInternal=this.#d.duration}delay(){return this.delayInternal}endDelay(){return this.#d.endDelay}iterationStart(){return this.#d.iterationStart}iterations(){return this.delay()||this.endDelay()||this.duration()?this.#d.iterations||1/0:0}duration(){return this.durationInternal}direction(){return this.#d.direction}fill(){return this.#d.fill}node(){return this.#h||(this.#h=new SDK.DOMModel.DeferredDOMNode(this.#a.target(),this.backendNodeId())),this.#h.resolvePromise()}deferredNode(){return new SDK.DOMModel.DeferredDOMNode(this.#a.target(),this.backendNodeId())}backendNodeId(){return this.#d.backendNodeId}keyframesRule(){return this.#l||null}easing(){return this.#d.easing}}export class KeyframesRule{#d;#m;constructor(e){this.#d=e,this.#m=this.#d.keyframes.map((function(e){return new KeyframeStyle(e)}))}setKeyframesPayload(e){this.#m=e.map((function(e){return new KeyframeStyle(e)}))}name(){return this.#d.name}keyframes(){return this.#m}}export class KeyframeStyle{#d;#u;constructor(e){this.#d=e,this.#u=this.#d.offset}offset(){return this.#u}setOffset(e){this.#u=100*e+"%"}offsetAsNumber(){return parseFloat(this.#u)/100}easing(){return this.#d.easing}}export class AnimationGroup{#a;#c;#p;#y;screenshotsInternal;#I;constructor(e,t,n){this.#a=e,this.#c=t,this.#p=n,this.#y=!1,this.screenshotsInternal=[],this.#I=[]}id(){return this.#c}animations(){return this.#p}release(){this.#a.animationGroups.delete(this.id()),this.#a.releaseAnimations(this.animationIds())}animationIds(){return this.#p.map((function(e){return e.id()}))}startTime(){return this.#p[0].startTime()}finiteDuration(){let e=0;for(let t=0;t<this.#p.length;++t)e=Math.max(e,this.#p[t].finiteDuration());return e}seekTo(e){this.#a.agent.invoke_seekAnimations({animations:this.animationIds(),currentTime:e})}paused(){return this.#y}togglePause(e){e!==this.#y&&(this.#y=e,this.#a.agent.invoke_setPaused({animations:this.animationIds(),paused:e}))}currentTimePromise(){let e=null;for(const t of this.#p)(!e||t.endTime()>e.endTime())&&(e=t);if(!e)throw new Error("No longest animation found");return this.#a.agent.invoke_getCurrentTime({id:e.id()}).then((({currentTime:e})=>e||0))}matches(e){function t(e){return"WebAnimation"===e.type()?e.type()+e.id():e.cssId()}if(this.#p.length!==e.#p.length)return!1;const n=this.#p.map(t).sort(),i=e.#p.map(t).sort();for(let e=0;e<n.length;e++)if(n[e]!==i[e])return!1;return!0}update(e){this.#a.releaseAnimations(this.animationIds()),this.#p=e.#p}screenshots(){for(let e=0;e<this.screenshotsInternal.length;++e){const t=new Image;t.src="data:image/jpeg;base64,"+this.screenshotsInternal[e],this.#I.push(t)}return this.screenshotsInternal=[],this.#I}}export class AnimationDispatcher{#a;constructor(e){this.#a=e}animationCreated({id:e}){this.#a.animationCreated(e)}animationCanceled({id:e}){this.#a.animationCanceled(e)}animationStarted({animation:e}){this.#a.animationStarted(e)}}export class ScreenshotCapture{#f;#g;#a;#M;#S;#A;constructor(e,t){this.#f=[],this.#g=t,this.#a=e,this.#a.addEventListener(Events.ModelReset,this.stopScreencast,this)}captureScreenshots(e,t){const n=Math.min(e/this.#a.playbackRate,3e3),i=n+window.performance.now();this.#f.push({endTime:i,screenshots:t}),(!this.#S||i>this.#S)&&(clearTimeout(this.#M),this.#M=window.setTimeout(this.stopScreencast.bind(this),n),this.#S=i),this.#A||(this.#A=!0,this.#g.startScreencast("jpeg",80,void 0,300,2,this.screencastFrame.bind(this),(e=>{})))}screencastFrame(e,t){if(!this.#A)return;const n=window.performance.now();this.#f=this.#f.filter((function(e){return e.endTime>=n}));for(const t of this.#f)t.screenshots.push(e)}stopScreencast(){this.#A&&(this.#M=void 0,this.#S=void 0,this.#f=[],this.#A=!1,this.#g.stopScreencast())}}SDK.SDKModel.SDKModel.register(AnimationModel,{capabilities:SDK.Target.Capability.DOM,autostart:!1});