@react-native/debugger-frontend/dist/third-party/front_end/panels/animation/animation.js

Debugger frontend for React Native based on Chrome DevTools

import*as e from"../../ui/components/icon_button/icon_button.js";import*as t from"../../ui/legacy/legacy.js";import*as i from"../../ui/visual_logging/visual_logging.js";import*as n from"../../core/common/common.js";import*as o from"../../core/host/host.js";import*as r from"../../core/i18n/i18n.js";import*as s from"../../core/platform/platform.js";import*as a from"../../ui/legacy/components/inline_editor/inline_editor.js";import*as l from"../../core/sdk/sdk.js";var d={cssText:`img{max-height:300px;border-radius:2px}.animation-progress{position:absolute;height:2px;bottom:0;left:0;background:var(--legacy-selection-bg-color)}\n/*# sourceURL=${import.meta.resolve("./animationScreenshotPopover.css")} */\n`};class c extends t.Widget.VBox{#e;#t;#i;#n;#o;#r;constructor(e){super(!0),this.registerRequiredCSS(d),console.assert(e.length>0),this.contentElement.classList.add("animation-screenshot-popover"),this.#e=e;for(const t of e)this.contentElement.appendChild(t),t.style.display="none";this.#t=0,this.#i=0,this.#e[0].style.display="block",this.#n=this.contentElement.createChild("div","animation-progress")}wasShown(){super.wasShown(),this.#t=this.contentElement.window().requestAnimationFrame(this.changeFrame.bind(this))}willHide(){this.contentElement.window().cancelAnimationFrame(this.#t),this.#r=void 0}changeFrame(){if(this.#t=this.contentElement.window().requestAnimationFrame(this.changeFrame.bind(this)),this.#r)return void this.#r--;if(this.#o=!this.#o,!this.#o)return;const e=this.#e.length;this.#e[this.#i%e].style.display="none",this.#i++,this.#e[this.#i%e].style.display="block",this.#i%e==e-1&&(this.#r=50),this.#n.style.width=(this.#i%e+1)/e*100+"%"}}var h=Object.freeze({__proto__:null,AnimationScreenshotPopover:c}),m={cssText:`:host{overflow:hidden;--timeline-controls-width:150px}.animation-node-row{width:100%;display:flex;border-bottom:1px dashed var(--sys-color-divider)}.animation-node-description{padding-left:8px;overflow:hidden;position:relative;background-color:var(--sys-color-cdt-base-container);display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;white-space:nowrap;flex:0 0 var(--timeline-controls-width);z-index:1}.animation-node-description > *{flex:0 0 auto}.animation-timeline-row{height:32px;position:relative}path.animation-keyframe{fill-opacity:20%}.animation-node-selected path.animation-keyframe,\nsvg.animation-ui g:first-child:hover path.animation-keyframe{fill-opacity:40%}line.animation-line{stroke-width:2px;stroke-linecap:round;fill:none}line.animation-delay-line{stroke-width:2px;stroke-dasharray:6,4}line.animation-delay-line.animation-fill{stroke-dasharray:none}circle.animation-keyframe-point{fill:var(--sys-color-cdt-base-container)}circle.animation-endpoint,\ncircle.animation-keyframe-point{stroke-width:2px;transition:transform 100ms cubic-bezier(0,0,0.2,1);transform:scale(1);transform-box:fill-box;transform-origin:50% 50%}circle.animation-endpoint:active,\ncircle.animation-keyframe-point:active{transform:scale(1)}.animation-ui circle.animation-endpoint:hover,\n.animation-ui circle.animation-keyframe-point:hover{transform:scale(1.2)}.animation-name{position:absolute;top:8px;color:var(--sys-color-on-surface);text-align:center;margin-left:-8px;white-space:nowrap}.animation-timeline-toolbar-container{display:flex;background-color:var(--sys-color-cdt-base-container);border-bottom:1px solid var(--sys-color-divider);flex:0 0 auto}.animation-timeline-header{height:28px;border-bottom:1px solid var(--sys-color-divider);flex-shrink:0;display:flex}.animation-timeline-header::after{content:'';height:calc(100% - 48px - 28px);position:absolute;width:var(--timeline-controls-width);left:0;margin-top:28px;background-color:var(--sys-color-cdt-base-container);z-index:0;border-right:1px solid var(--sys-color-divider)}.animation-controls{flex:0 0 var(--timeline-controls-width);position:relative;display:flex;justify-content:flex-end;padding-right:8px}.animation-timeline-current-time{flex:0 0 auto;line-height:28px;margin-right:5px}.animation-grid-header{flex:1 0 auto;z-index:2}.animation-grid-header.scrubber-enabled{cursor:pointer}.animation-timeline-buffer{height:48px;flex:0 0 auto;border-bottom:1px solid var(--sys-color-divider);display:flex;padding:0 2px}.animation-timeline-buffer-hint{display:none}.animation-time-overlay{background-color:var(--sys-color-on-surface);opacity:5%;position:absolute;height:100%;width:100%;z-index:-1}.animation-timeline-end > .animation-time-overlay{visibility:hidden}.animation-scrubber{opacity:100%;position:absolute;left:10px;height:100%;width:100%;top:28px;border-left:1px solid var(--sys-color-error);z-index:2}.animation-scrubber-line{width:11px;background:linear-gradient(to right,transparent 5px,var(--sys-color-error) 5px,var(--sys-color-error) 6px,transparent 6px);position:absolute;top:-28px;height:28px;left:-6px;padding:0 5px;z-index:3}.animation-scrubber-head{width:7px;height:7px;transform:rotate(45deg);background:var(--sys-color-error);position:absolute;left:2px;top:1px;z-index:4}.grid-overflow-wrapper{position:absolute;left:calc(var(--timeline-controls-width) - 10px);top:76px;z-index:1;overflow:hidden;width:100%;height:100%}svg.animation-timeline-grid{position:absolute;inset:0;width:100%;height:100%}rect.animation-timeline-grid-line{fill:var(--sys-color-divider)}.animation-timeline-row > svg.animation-ui{position:absolute}.animation-node-timeline{flex-grow:1}.animation-node-description > div{position:absolute;top:50%;transform:translateY(-50%);max-height:100%}.animation-node-removed{filter:saturate(0);cursor:not-allowed}.animation-node-removed-overlay{width:100%;height:100%;z-index:100;cursor:not-allowed}svg.animation-ui g:first-child{opacity:100%}svg.animation-ui circle:focus-visible,\nsvg.animation-ui path:focus-visible{outline:2px solid -webkit-focus-ring-color}.animation-tail-iterations{opacity:50%}.animation-keyframe-step line{stroke-width:2;stroke-opacity:30%}text.animation-timeline-grid-label{font-size:10px;fill:var(--sys-color-token-subtle);text-anchor:middle}@keyframes --full-opacity-for-screenshots-container{from{opacity:100%}to{opacity:100%}}.preview-ui-container{position:relative;& .screenshot-arrow{background-image:var(--image-file-popoverArrows);background-position:0 76px;width:19px;height:19px;position:absolute;left:6px;top:-19px;z-index:100;pointer-events:none}& .screenshots-container{position:absolute;display:none;opacity:0%;left:6px;top:100%;z-index:100;border:1px solid transparent;box-shadow:var(--drop-shadow);border-radius:2px;max-width:220px;max-height:220px}& .screenshots-container.to-the-left{left:unset;right:6px}& .screenshots-container.to-the-left .screenshot-arrow{left:unset;right:6px}&:hover .screenshots-container:not(.no-screenshots){display:block;animation-name:--full-opacity-for-screenshots-container;animation-duration:0s;animation-delay:0.2s;animation-fill-mode:forwards}&:hover .screenshots-container:not(.no-screenshots):hover{display:none}&:has(.selected):hover .screenshots-container:not(.no-screenshots){display:none}}.animation-timeline-rows,\n.animation-timeline-rows-hint,\n.animation-timeline-buffer-hint{flex-grow:1;overflow:hidden auto;z-index:1}.animation-timeline-rows-hint{display:none}.animation-timeline-buffer:not(:empty) ~ .animation-timeline-rows:empty{flex-grow:0}.animation-timeline-rows:empty{display:none}.animation-timeline-buffer:not(:empty)\n  ~ .animation-timeline-rows:empty\n  ~ .animation-timeline-buffer-hint:not(:empty)\n  ~ .animation-timeline-rows-hint,\n.animation-timeline-buffer:empty ~ .animation-timeline-buffer-hint{font-size:14px;display:flex;align-items:center;justify-content:center;margin-left:var(--timeline-controls-width);padding:10px}.animation-controls-toolbar{flex:0 0 auto}.animation-node-row.animation-node-selected{background-color:var(--sys-color-state-ripple-primary)}.animation-node-selected > .animation-node-description{background-color:var(--sys-color-tonal-container)}.animation-buffer-preview{height:40px;margin:4px 2px;background-color:var(--sys-color-neutral-container);border:1px solid transparent;border-radius:2px;flex:1 1;padding:4px;max-width:100px;animation:newGroupAnim 200ms;position:relative}.animation-buffer-preview.no-animation{animation:none}.animation-buffer-preview .preview-icon{position:absolute;width:14px;height:14px;right:1px;bottom:2px;opacity:60%}.animation-buffer-preview-animation{width:100%;height:100%;border-radius:2px 0 0 2px;position:absolute;top:0;left:0;background:var(--sys-color-tonal-container);opacity:0%;border-right:1px solid var(--sys-color-divider)}.animation-buffer-preview:focus-visible{outline:-webkit-focus-ring-color auto 5px}.animation-buffer-preview.selected .preview-icon{opacity:100%}.animation-buffer-preview:not(.selected):focus-visible,\n.animation-buffer-preview:not(.selected):hover{background-color:var(--sys-color-surface-variant);& .preview-icon{opacity:80%}}.animation-buffer-preview.selected{background-color:var(--sys-color-tonal-container)}.animation-paused{align-items:center;justify-content:center;display:none}.animation-paused::before,\n.animation-paused::after{content:'';background:var(--sys-color-cdt-base-container);width:7px;height:20px;border-radius:2px;margin:2px;border:1px solid var(--sys-color-divider)}.animation-buffer-preview.paused .animation-paused{display:flex}.animation-buffer-preview > svg > line{stroke-width:1px}.animation-buffer-preview.selected > svg > line{stroke:var(\n    --sys-color-on-tonal-container\n  )!important}@keyframes newGroupAnim{from{clip-path:polygon(0% 0%,0% 100%,50% 100%,50% 0%)}to{clip-path:polygon(0% 0%,0% 100%,100% 100%,100% 0%)}}.animation-playback-rate-control{margin:4px 0 4px 2px;display:flex;width:120px}.animation-playback-rate-button{border-width:1px;border-style:solid;border-color:var(--sys-color-tonal-outline);border-right-width:0;color:var(--sys-color-on-surface);display:inline-block;margin-right:-1px;padding:1px 4px;background-color:transparent;flex:1 0 auto;text-align:center}.animation-playback-rate-button:first-child{border-radius:4px 0 0 4px}.animation-playback-rate-button:last-child{border-radius:0 4px 4px 0;border-right-width:1px}.animation-playback-rate-button.selected{color:var(--sys-color-on-tonal-container);background-color:var(--sys-color-tonal-container);border-color:var(--sys-color-tonal-container);z-index:1}.animation-playback-rate-button.selected:focus-visible{color:var(--sys-color-on-surface)}.animation-playback-rate-button:focus-visible{outline:2px solid var(--sys-color-primary);outline-offset:2px}.animation-playback-rate-button:not(.selected, [disabled]):hover{background:var(--sys-color-state-hover-on-subtle)}.animation-playback-rate-button[disabled]{background:unset;border-color:var(--sys-color-state-disabled);color:var(--sys-color-state-disabled)}.animation-remove-button{position:absolute;top:-3px;right:-3px;background:var(--sys-color-token-subtle);border-radius:12px;border:0;height:16px;width:16px;z-index:100;display:none;padding:0;& > devtools-icon{height:16px;width:16px;color:var(--sys-color-cdt-base-container)}&:hover{background-color:var(--sys-color-on-surface)}}.animation-buffer-preview:hover .animation-remove-button{display:flex}.timeline-controls-resizer{position:absolute;width:6px;height:100%;left:var(--timeline-controls-width);top:104px;z-index:3;margin-left:-4px}@media (forced-colors: active){.animation-playback-rate-button.selected,\n  .animation-playback-rate-button.selected:first-child,\n  .animation-playback-rate-button.selected:first-child:focus-visible,\n  .animation-playback-rate-button:focus-visible{forced-color-adjust:none;color:HighlightText;background-color:Highlight}.animation-node-description:focus-visible{background-color:var(--sys-color-cdt-base-container);forced-color-adjust:none}.monospace{forced-color-adjust:auto}}\n/*# sourceURL=${import.meta.resolve("./animationTimeline.css")} */\n`};const u={noEffectSelected:"No animation effect selected",selectAnEffectAboveToInspectAnd:"Select an effect above to inspect and modify",clearAll:"Clear all",pauseAll:"Pause all",playbackRates:"Playback rates",playbackRatePlaceholder:"{PH1}%",pause:"Pause",setSpeedToS:"Set speed to {PH1}",animationPreviews:"Animation previews",waitingForAnimations:"Currently waiting for animations",animationDescription:"On this page you can inspect and modify animations.",replayTimeline:"Replay timeline",resumeAll:"Resume all",playTimeline:"Play timeline",pauseTimeline:"Pause timeline",animationPreviewS:"Animation Preview {PH1}"},p=r.i18n.registerUIStrings("panels/animation/AnimationTimeline.ts",u),b=r.i18n.getLocalizedString.bind(void 0,p),f=new WeakMap,v=new WeakMap;let g;class y extends t.Widget.VBox{#s;#a;#l;#d;#c=[];#h;#m;#u;#p;#b;#f;#v;#g;#y;#w;#x;#A;#k;#T;#M;#S;#C;#P;#G;#E;#R;#I;#L;#B;#D;#U;#F;#O;#z;#N;#H;#j=new n.Throttler.Throttler(10);#V=new n.Throttler.Throttler(10);constructor(){super(!0),this.registerRequiredCSS(m),this.element.classList.add("animations-timeline"),this.element.setAttribute("jslog",`${i.panel("animations").track({resize:!0})}`),this.#O=this.contentElement.createChild("div","timeline-controls-resizer"),this.#s=this.contentElement.createChild("div","grid-overflow-wrapper"),this.#a=t.UIUtils.createSVGChild(this.#s,"svg","animation-timeline-grid"),this.#l=1,this.#d=!1,this.#U=!1,this.createHeader(),this.#h=this.contentElement.createChild("div","animation-timeline-rows"),this.#h.setAttribute("jslog",`${i.section("animations")}`);const e=this.contentElement.createChild("div","animation-timeline-buffer-hint"),n=new t.EmptyWidget.EmptyWidget(b(u.waitingForAnimations),b(u.animationDescription));n.appendLink("https://developer.chrome.com/docs/devtools/css/animations"),n.show(e);const o=this.contentElement.createChild("div","animation-timeline-rows-hint");new t.EmptyWidget.EmptyWidget(b(u.noEffectSelected),b(u.selectAnEffectAboveToInspectAnd)).show(o),this.#y=100,this.#w=this.#y,this.#A=new Map,this.#k=[],this.#T=[],this.#H=[],this.#M=new Map,this.#S=new Map,this.#x=150,this.element.style.setProperty("--timeline-controls-width",`${this.#x}px`),l.TargetManager.TargetManager.instance().addModelListener(l.DOMModel.DOMModel,l.DOMModel.Events.NodeRemoved,(e=>this.markNodeAsRemoved(e.data.node)),this,{scoped:!0}),l.TargetManager.TargetManager.instance().observeModels(l.AnimationModel.AnimationModel,this,{scoped:!0}),t.Context.Context.instance().addFlavorChangeListener(l.DOMModel.DOMNode,this.nodeChanged,this),this.#W()}static instance(e){return g&&!e?.forceNew||(g=new y),g}#W(){let e;t.UIUtils.installDragHandle(this.#O,(t=>(e=t.clientX,!0)),(t=>{if(void 0===e)return;const i=this.#x+t.clientX-e;this.#x=Math.min(Math.max(i,120),720),e=t.clientX,this.element.style.setProperty("--timeline-controls-width",this.#x+"px"),this.onResize()}),(()=>{e=void 0}),"ew-resize")}get previewMap(){return this.#M}get uiAnimations(){return this.#k}get groupBuffer(){return this.#T}wasShown(){super.wasShown();for(const e of l.TargetManager.TargetManager.instance().models(l.AnimationModel.AnimationModel,{scoped:!0}))this.#_(e),this.addEventListeners(e)}willHide(){for(const e of l.TargetManager.TargetManager.instance().models(l.AnimationModel.AnimationModel,{scoped:!0}))this.removeEventListeners(e)}#_(e){for(const t of e.animationGroups.values())this.#M.has(t)||this.addAnimationGroup(t)}#$(){t.ViewManager.ViewManager.instance().moveView("animations","drawer-view",{shouldSelectTab:!0,overrideSaving:!0})}async revealAnimationGroup(e){return this.#M.has(e)||await this.addAnimationGroup(e),this.#$(),await this.selectAnimationGroup(e)}modelAdded(e){this.isShowing()&&this.addEventListeners(e)}modelRemoved(e){this.removeEventListeners(e)}addEventListeners(e){e.addEventListener(l.AnimationModel.Events.AnimationGroupStarted,this.animationGroupStarted,this),e.addEventListener(l.AnimationModel.Events.AnimationGroupUpdated,this.animationGroupUpdated,this),e.addEventListener(l.AnimationModel.Events.ModelReset,this.reset,this)}removeEventListeners(e){e.removeEventListener(l.AnimationModel.Events.AnimationGroupStarted,this.animationGroupStarted,this),e.removeEventListener(l.AnimationModel.Events.AnimationGroupUpdated,this.animationGroupUpdated,this),e.removeEventListener(l.AnimationModel.Events.ModelReset,this.reset,this)}nodeChanged(){for(const e of this.#A.values())e.nodeChanged()}createScrubber(){return this.#p=document.createElement("div"),this.#p.classList.add("animation-scrubber"),this.#p.classList.add("hidden"),this.#C=this.#p.createChild("div","animation-scrubber-line"),this.#C.createChild("div","animation-scrubber-head"),this.#p.createChild("div","animation-time-overlay"),this.#p}createHeader(){const e=this.contentElement.createChild("div","animation-timeline-toolbar-container");e.setAttribute("jslog",`${i.toolbar()}`),e.role="toolbar";const n=e.createChild("devtools-toolbar","animation-timeline-toolbar");n.role="presentation",this.#f=new t.Toolbar.ToolbarButton(b(u.clearAll),"clear",void 0,"animations.clear"),this.#f.addEventListener("Click",(()=>{o.userMetrics.actionTaken(o.UserMetrics.Action.AnimationGroupsCleared),this.reset()})),n.appendToolbarItem(this.#f),n.appendSeparator(),this.#P=new t.Toolbar.ToolbarToggle(b(u.pauseAll),"pause","resume","animations.pause-resume-all"),this.#P.addEventListener("Click",(()=>{this.togglePauseAll()})),n.appendToolbarItem(this.#P);const r=e.createChild("div","animation-playback-rate-control");r.addEventListener("keydown",this.handlePlaybackRateControlKeyDown.bind(this)),t.ARIAUtils.markAsListBox(r),t.ARIAUtils.setLabel(r,b(u.playbackRates)),this.#m=[];for(const e of w){const n=r.createChild("button","animation-playback-rate-button");n.textContent=e?b(u.playbackRatePlaceholder,{PH1:100*e}):b(u.pause),n.setAttribute("jslog",`${i.action().context("animations.playback-rate-"+100*e).track({click:!0,keydown:"ArrowUp|ArrowDown|ArrowLeft|ArrowRight"})}`),v.set(n,e),n.addEventListener("click",this.setPlaybackRate.bind(this,e)),t.ARIAUtils.markAsOption(n),t.Tooltip.Tooltip.install(n,b(u.setSpeedToS,{PH1:n.textContent})),n.tabIndex=-1,this.#m.push(n)}this.updatePlaybackControls(),this.#u=this.contentElement.createChild("div","animation-timeline-buffer"),this.#u.setAttribute("jslog",`${i.section("film-strip")}`),t.ARIAUtils.markAsListBox(this.#u),t.ARIAUtils.setLabel(this.#u,b(u.animationPreviews));const s=this.contentElement.createChild("div","animation-timeline-header"),a=s.createChild("div","animation-controls");this.#b=a.createChild("div","animation-timeline-current-time monospace");const l=a.createChild("devtools-toolbar","animation-controls-toolbar");return this.#G=new t.Toolbar.ToolbarButton(b(u.replayTimeline),"replay",void 0,"animations.play-replay-pause-animation-group"),this.#G.element.classList.add("toolbar-state-on"),this.#E="replay-outline",this.#G.addEventListener("Click",this.controlButtonToggle.bind(this)),l.appendToolbarItem(this.#G),this.#z=s.createChild("div","animation-grid-header"),this.#z.setAttribute("jslog",`${i.timeline("animations.grid-header").track({drag:!0,click:!0})}`),t.UIUtils.installDragHandle(this.#z,this.scrubberDragStart.bind(this),this.scrubberDragMove.bind(this),this.scrubberDragEnd.bind(this),null),this.#s.appendChild(this.createScrubber()),this.clearCurrentTimeText(),s}handlePlaybackRateControlKeyDown(e){switch(e.key){case"ArrowLeft":case"ArrowUp":this.focusNextPlaybackRateButton(e.target,!0);break;case"ArrowRight":case"ArrowDown":this.focusNextPlaybackRateButton(e.target)}}focusNextPlaybackRateButton(e,t){const i=e,n=this.#m.indexOf(i),o=t?n-1:n+1;if(o<0||o>=this.#m.length)return;const r=this.#m[o];r.tabIndex=0,r.focus(),e&&(e.tabIndex=-1)}togglePauseAll(){this.#d=!this.#d,o.userMetrics.actionTaken(this.#d?o.UserMetrics.Action.AnimationsPaused:o.UserMetrics.Action.AnimationsResumed),this.setPlaybackRate(this.#l),this.#P&&this.#P.setTitle(this.#d?b(u.resumeAll):b(u.pauseAll))}setPlaybackRate(e){e!==this.#l&&o.userMetrics.animationPlaybackRateChanged(.1===e?2:.25===e?1:1===e?0:3),this.#l=e;for(const e of l.TargetManager.TargetManager.instance().models(l.AnimationModel.AnimationModel,{scoped:!0}))e.setPlaybackRate(this.#d?0:this.#l);o.userMetrics.actionTaken(o.UserMetrics.Action.AnimationsPlaybackRateChanged),this.#L&&(this.#L.playbackRate=this.effectivePlaybackRate()),this.updatePlaybackControls()}updatePlaybackControls(){for(const e of this.#m){const t=this.#l===v.get(e);e.classList.toggle("selected",t),e.tabIndex=t?0:-1}}controlButtonToggle(){"play-outline"===this.#E?this.togglePause(!1):"replay-outline"===this.#E?(o.userMetrics.actionTaken(o.UserMetrics.Action.AnimationGroupReplayed),this.replay()):this.togglePause(!0)}updateControlButton(){this.#G&&(this.#G.setEnabled(Boolean(this.#v)&&this.hasAnimationGroupActiveNodes()&&!this.#v?.isScrollDriven()),this.#v&&this.#v.paused()?(this.#E="play-outline",this.#G.element.classList.toggle("toolbar-state-on",!0),this.#G.setTitle(b(u.playTimeline)),this.#G.setGlyph("play")):!this.#L||!this.#L.currentTime||"number"!=typeof this.#L.currentTime||this.#L.currentTime>=this.duration()?(this.#E="replay-outline",this.#G.element.classList.toggle("toolbar-state-on",!0),this.#G.setTitle(b(u.replayTimeline)),this.#G.setGlyph("replay")):(this.#E="pause-outline",this.#G.element.classList.toggle("toolbar-state-on",!1),this.#G.setTitle(b(u.pauseTimeline)),this.#G.setGlyph("pause")))}effectivePlaybackRate(){return this.#d||this.#v&&this.#v.paused()?0:this.#l}togglePause(e){if(this.#v){this.#v.togglePause(e);const t=this.#M.get(this.#v);t&&t.element.classList.toggle("paused",e)}this.#L&&(this.#L.playbackRate=this.effectivePlaybackRate()),this.updateControlButton()}replay(){this.#v&&this.hasAnimationGroupActiveNodes()&&!this.#v.isScrollDriven()&&(this.#v.seekTo(0),this.animateTime(0),this.updateControlButton())}duration(){return this.#w}setDuration(e){this.#w=e,this.scheduleRedraw()}clearTimeline(){this.#v&&this.#N&&this.#v.scrollNode().then((e=>{e?.removeScrollEventListener(this.#N),this.#N=void 0})),this.#k=[],this.#A.clear(),this.#S.clear(),this.#h.removeChildren(),this.#w=this.#y,this.#p.classList.add("hidden"),this.#z.classList.remove("scrubber-enabled"),this.#v=null,this.#L&&this.#L.cancel(),this.#L=void 0,this.clearCurrentTimeText(),this.updateControlButton()}reset(){this.clearTimeline(),this.setPlaybackRate(this.#l);for(const e of this.#T)e.release();this.#T=[],this.clearPreviews(),this.renderGrid()}animationGroupStarted({data:e}){this.addAnimationGroup(e)}scheduledRedrawAfterAnimationGroupUpdatedForTest(){}animationGroupUpdated({data:e}){this.#V.schedule((async()=>{const t=this.#M.get(e);if(t&&t.replay(),this.#v===e){if(e.isScrollDriven()){const t=await e.scrollNode();if(t){const i="vertical"===e.scrollOrientation()?await t.verticalScrollRange():await t.horizontalScrollRange(),n="vertical"===e.scrollOrientation()?await t.scrollTop():await t.scrollLeft();null!==i&&this.setDuration(i),null!==n&&(this.setCurrentTimeText(n),this.setTimelineScrubberPosition(n))}}else this.setDuration(e.finiteDuration());this.updateControlButton(),this.scheduleRedraw(),this.scheduledRedrawAfterAnimationGroupUpdatedForTest()}}))}clearPreviews(){this.#M.clear(),this.#c.forEach((e=>{e.detach()})),this.#u.removeChildren(),this.#c=[]}createPreview(e){const i=new R(e),n=document.createElement("div");n.classList.add("preview-ui-container"),n.appendChild(i.element);const o=document.createElement("div");if(o.classList.add("screenshots-container","no-screenshots"),o.createChild("span","screenshot-arrow"),o.addEventListener("animationend",(()=>{const{right:e,left:t,width:i}=o.getBoundingClientRect();e>window.innerWidth&&t-i>=0&&o.classList.add("to-the-left")})),n.appendChild(o),this.#T.push(e),this.#M.set(e,i),this.#u.appendChild(n),i.removeButton().addEventListener("click",this.removeAnimationGroup.bind(this,e)),i.element.addEventListener("click",this.selectAnimationGroup.bind(this,e)),i.element.addEventListener("keydown",this.handleAnimationGroupKeyDown.bind(this,e)),i.element.addEventListener("mouseover",(()=>{const t=e.screenshots();if(!t.length)return;o.classList.remove("no-screenshots");const i=()=>{const e=new c(t);this.#c.push(e),e.show(o)};t[0].complete?i():t[0].onload=i}),{once:!0}),t.ARIAUtils.setLabel(i.element,b(u.animationPreviewS,{PH1:this.#T.indexOf(e)+1})),t.ARIAUtils.markAsOption(i.element),1===this.#M.size){const e=this.#M.get(this.#T[0]);e&&(e.element.tabIndex=0)}}previewsCreatedForTest(){}createPreviewForCollectedGroups(){this.#H.sort(((e,t)=>e.isScrollDriven()&&!t.isScrollDriven()?-1:!e.isScrollDriven()&&t.isScrollDriven()?1:e.startTime()!==t.startTime()?e.startTime()-t.startTime():e.animations.length-t.animations.length));for(const e of this.#H)this.createPreview(e);this.#H=[],this.previewsCreatedForTest()}addAnimationGroup(e){const t=this.#M.get(e);if(t)return this.#v===e?this.syncScrubber():t.replay(),Promise.resolve();this.#T.sort(((e,t)=>e.startTime()-t.startTime()));const i=[],n=this.width()/50;for(;this.#T.length>n;){const e=this.#T.splice(this.#T[0]===this.#v?1:0,1);i.push(e[0])}for(const e of i){const t=this.#M.get(e);t&&(t.element.remove(),this.#M.delete(e),e.release())}return this.#H.push(e),this.#j.schedule((()=>Promise.resolve(this.createPreviewForCollectedGroups())))}handleAnimationGroupKeyDown(e,t){switch(t.key){case"Backspace":case"Delete":this.removeAnimationGroup(e,t);break;case"ArrowLeft":case"ArrowUp":this.focusNextGroup(e,t.target,!0);break;case"ArrowRight":case"ArrowDown":this.focusNextGroup(e,t.target)}}focusNextGroup(e,t,i){const n=this.#T.indexOf(e),o=i?n-1:n+1;if(o<0||o>=this.#T.length)return;const r=this.#M.get(this.#T[o]);r&&(r.element.tabIndex=0,r.element.focus()),t&&(t.tabIndex=-1)}removeAnimationGroup(e,t){const i=this.#T.indexOf(e);s.ArrayUtilities.removeElement(this.#T,e);const n=this.#M.get(e);n&&n.element.remove(),this.#M.delete(e),e.release(),t.consume(!0),this.#v===e&&(this.clearTimeline(),this.renderGrid());if(0===this.#T.length)return void this.#f.element.focus();const o=i>=this.#T.length?this.#M.get(this.#T[this.#T.length-1]):this.#M.get(this.#T[i]);o&&(o.element.tabIndex=0,o.element.focus())}clearCurrentTimeText(){this.#b.textContent=""}setCurrentTimeText(e){this.#v&&(this.#b.textContent=this.#v?.isScrollDriven()?`${e.toFixed(0)}px`:r.TimeUtilities.millisToString(e))}async selectAnimationGroup(e){if(this.#v===e)return this.togglePause(!1),void this.replay();if(this.clearTimeline(),this.#v=e,this.#M.forEach(((e,t)=>{e.element.classList.toggle("selected",this.#v===t)})),e.isScrollDriven()){const t=await e.scrollNode();if(!t)throw new Error("Scroll container is not found for the scroll driven animation");const i="vertical"===e.scrollOrientation()?await t.verticalScrollRange():await t.horizontalScrollRange(),n="vertical"===e.scrollOrientation()?await t.scrollTop():await t.scrollLeft();if("number"!=typeof i||"number"!=typeof n)throw new Error("Scroll range or scroll offset is not resolved for the scroll driven animation");this.#N=await t.addScrollEventListener((({scrollTop:t,scrollLeft:i})=>{const n="vertical"===e.scrollOrientation()?t:i;this.setCurrentTimeText(n),this.setTimelineScrubberPosition(n)})),this.setDuration(i),this.setCurrentTimeText(n),this.setTimelineScrubberPosition(n),this.#m.forEach((e=>{e.setAttribute("disabled","true")})),this.#P&&this.#P.setEnabled(!1)}else this.setDuration(e.finiteDuration()),this.#m.forEach((e=>{e.removeAttribute("disabled")})),this.#P&&this.#P.setEnabled(!0);await Promise.all(e.animations().map((e=>this.addAnimation(e)))),this.scheduleRedraw(),this.togglePause(!1),this.replay(),this.hasAnimationGroupActiveNodes()&&(this.#p.classList.remove("hidden"),this.#z.classList.add("scrubber-enabled")),o.userMetrics.actionTaken(o.UserMetrics.Action.AnimationGroupSelected),this.#v.isScrollDriven()&&o.userMetrics.actionTaken(o.UserMetrics.Action.ScrollDrivenAnimationGroupSelected),this.animationGroupSelectedForTest()}animationGroupSelectedForTest(){}async addAnimation(e){let t=this.#A.get(e.source().backendNodeId());t||(t=new x(e.source()),this.#h.appendChild(t.element),this.#A.set(e.source().backendNodeId(),t));const i=t.createNewRow(),n=new C(e,this,i),o=await e.source().deferredNode().resolvePromise();n.setNode(o),o&&t&&(t.nodeResolved(o),f.set(o,t)),this.#k.push(n),this.#S.set(e.id(),e)}markNodeAsRemoved(e){f.get(e)?.nodeRemoved();for(const t of e.pseudoElements().values())t.forEach((e=>this.markNodeAsRemoved(e)));e.children()?.forEach((e=>{this.markNodeAsRemoved(e)})),this.hasAnimationGroupActiveNodes()||(this.#z.classList.remove("scrubber-enabled"),this.#p.classList.add("hidden"),this.#L?.cancel(),this.#L=void 0,this.clearCurrentTimeText(),this.updateControlButton())}hasAnimationGroupActiveNodes(){for(const e of this.#A.values())if(e.hasActiveNode())return!0;return!1}renderGrid(){const e=this.#v?.isScrollDriven(),i=e?this.duration()/10:250;let n;this.#a.removeChildren();for(let e=0;e<this.duration();e+=i){const i=t.UIUtils.createSVGChild(this.#a,"rect","animation-timeline-grid-line");i.setAttribute("x",(e*this.pixelTimeRatio()+10).toString()),i.setAttribute("y","23"),i.setAttribute("height","100%"),i.setAttribute("width","1")}for(let o=0;o<this.duration();o+=i){const i=o*this.pixelTimeRatio();if(void 0===n||i-n>50){n=i;const s=t.UIUtils.createSVGChild(this.#a,"text","animation-timeline-grid-label");s.textContent=e?`${o.toFixed(0)}px`:r.TimeUtilities.millisToString(o),s.setAttribute("x",(i+12).toString()),s.setAttribute("y","16")}}}scheduleRedraw(){this.renderGrid(),this.#g=[];for(const e of this.#k)this.#g.push(e);this.#R||(this.#R=!0,this.#h.window().requestAnimationFrame(this.render.bind(this)))}render(e){for(;this.#g.length&&(!e||window.performance.now()-e<50);){const e=this.#g.shift();e&&e.redraw()}this.#g.length?this.#h.window().requestAnimationFrame(this.render.bind(this)):this.#R=void 0}onResize(){this.#I=Math.max(0,this.contentElement.offsetWidth-this.#x)||0,this.scheduleRedraw(),this.#L&&this.syncScrubber(),this.#B=void 0}width(){return this.#I||0}syncScrubber(){this.#v&&this.hasAnimationGroupActiveNodes()&&this.#v.currentTimePromise().then(this.animateTime.bind(this)).then(this.updateControlButton.bind(this))}animateTime(e){this.#v?.isScrollDriven()||(this.#L&&this.#L.cancel(),this.#L=this.#p.animate([{transform:"translateX(0px)"},{transform:"translateX("+this.width()+"px)"}],{duration:this.duration(),fill:"forwards"}),this.#L.playbackRate=this.effectivePlaybackRate(),this.#L.onfinish=this.updateControlButton.bind(this),this.#L.currentTime=e,this.element.window().requestAnimationFrame(this.updateScrubber.bind(this)))}pixelTimeRatio(){return this.width()/this.duration()||0}updateScrubber(e){this.#L&&(this.setCurrentTimeText(this.#X()),"pending"!==this.#L.playState.toString()&&"running"!==this.#L.playState||this.element.window().requestAnimationFrame(this.updateScrubber.bind(this)))}scrubberDragStart(e){if(!this.#v||!this.hasAnimationGroupActiveNodes())return!1;this.#B||(this.#B=this.#a.getBoundingClientRect().left+10);const{x:t}=e,i=Math.max(0,t-this.#B)/this.pixelTimeRatio();if(this.#D=i,this.#F=t,this.setCurrentTimeText(i),this.#v.isScrollDriven())this.setTimelineScrubberPosition(i),this.updateScrollOffsetOnPage(i);else{const e=this.#L?.currentTime;this.#U=this.#v.paused()||"number"==typeof e&&e>=this.duration(),this.#v.seekTo(i),this.togglePause(!0),this.animateTime(i)}return!0}async updateScrollOffsetOnPage(e){const t=await(this.#v?.scrollNode());if(t)return"vertical"===this.#v?.scrollOrientation()?await t.setScrollTop(e):await t.setScrollLeft(e)}setTimelineScrubberPosition(e){this.#p.style.transform=`translateX(${e*this.pixelTimeRatio()}px)`}scrubberDragMove(e){const{x:t}=e,i=t-(this.#F||0),n=Math.max(0,Math.min((this.#D||0)+i/this.pixelTimeRatio(),this.duration()));this.#L?this.#L.currentTime=n:(this.setTimelineScrubberPosition(n),this.updateScrollOffsetOnPage(n)),this.setCurrentTimeText(n),this.#v&&!this.#v.isScrollDriven()&&this.#v.seekTo(n)}#X(){return"number"==typeof this.#L?.currentTime?this.#L.currentTime:0}scrubberDragEnd(e){if(this.#L){const e=Math.max(0,this.#X());this.#L.play(),this.#L.currentTime=e}o.userMetrics.actionTaken(o.UserMetrics.Action.AnimationGroupScrubbed),this.#v?.isScrollDriven()&&o.userMetrics.actionTaken(o.UserMetrics.Action.ScrollDrivenAnimationGroupScrubbed),this.#b.window().requestAnimationFrame(this.updateScrubber.bind(this)),this.#U||this.togglePause(!1)}}const w=[1,.25,.1];class x{element;#K;#q;#Q;#Y;constructor(e){this.element=document.createElement("div"),this.element.classList.add("animation-node-row"),this.#K=this.element.createChild("div","animation-node-description"),this.#K.setAttribute("jslog",`${i.tableCell("description").track({resize:!0})}`),this.#q=this.element.createChild("div","animation-node-timeline"),this.#q.setAttribute("jslog",`${i.tableCell("timeline").track({resize:!0})}`),t.ARIAUtils.markAsApplication(this.#q)}nodeResolved(e){e?(this.#Y=e,this.nodeChanged(),n.Linkifier.Linkifier.linkify(e).then((e=>{e.addEventListener("click",(()=>{o.userMetrics.actionTaken(o.UserMetrics.Action.AnimatedNodeDescriptionClicked)})),this.#K.appendChild(e)})),e.ownerDocument||this.nodeRemoved()):t.UIUtils.createTextChild(this.#K,"<node>")}createNewRow(){return this.#q.createChild("div","animation-timeline-row")}nodeRemoved(){this.element.classList.add("animation-node-removed"),this.#Q||(this.#Q=document.createElement("div"),this.#Q.classList.add("animation-node-removed-overlay"),this.#K.appendChild(this.#Q)),this.#Y=null}hasActiveNode(){return Boolean(this.#Y)}nodeChanged(){let e=!1;this.#Y&&(e=this.#Y===t.Context.Context.instance().flavor(l.DOMModel.DOMNode)),this.element.classList.toggle("animation-node-selected",e)}}class A{steps;stepAtPosition;constructor(e,t){this.steps=e,this.stepAtPosition=t}static parse(e){let t=e.match(/^steps\((\d+), (start|middle)\)$/);return t?new A(parseInt(t[1],10),t[2]):(t=e.match(/^steps\((\d+)\)$/),t?new A(parseInt(t[1],10),"end"):null)}}var k=Object.freeze({__proto__:null,AnimationGroupRevealer:class{async reveal(e){await y.instance().revealAnimationGroup(e)}},AnimationTimeline:y,GlobalPlaybackRates:w,NodeUI:x,StepTimingFunction:A});const T={animationEndpointSlider:"Animation Endpoint slider",animationKeyframeSlider:"Animation Keyframe slider",sSlider:"{PH1} slider"},M=r.i18n.registerUIStrings("panels/animation/AnimationUI.ts",T),S=r.i18n.getLocalizedString.bind(void 0,M);class C{#Z;#J;#ee;#te;#ie;#ne;#oe;#re;#se;#ae;#Y;#le;#de;#ce;#he;#me;#ue;constructor(e,n,o){this.#Z=e,this.#J=n;const r=this.#Z.source().keyframesRule();r&&(this.#ee=r.keyframes(),e.viewOrScrollTimeline()&&e.playbackRate()<0&&this.#ee.reverse()),this.#te=o.createChild("div","animation-name"),this.#te.textContent=this.#Z.name(),this.#ie=t.UIUtils.createSVGChild(o,"svg","animation-ui"),this.#ie.setAttribute("height",P.AnimationSVGHeight.toString()),this.#ie.style.marginLeft="-"+P.AnimationMargin+"px",this.#ie.addEventListener("contextmenu",this.onContextMenu.bind(this)),this.#ne=t.UIUtils.createSVGChild(this.#ie,"g"),this.#ne.setAttribute("jslog",`${i.animationClip().track({drag:!0})}`),this.#Z.viewOrScrollTimeline()||(t.UIUtils.installDragHandle(this.#ne,this.mouseDown.bind(this,"AnimationDrag",null),this.mouseMove.bind(this),this.mouseUp.bind(this),"-webkit-grabbing","-webkit-grab"),C.installDragHandleKeyboard(this.#ne,this.keydownMove.bind(this,"AnimationDrag",null))),this.#oe=[],this.#re=0,this.#se=50,this.#ae=C.colorForAnimation(this.#Z)}static colorForAnimation(e){const t=Array.from(G.keys()),i=t[s.StringUtilities.hashCode(e.name()||e.id())%t.length],n=G.get(i);if(!n)throw new Error("Unable to locate color");return n.asString("rgb")||""}static installDragHandleKeyboard(e,t){e.addEventListener("keydown",t,!1)}animation(){return this.#Z}get nameElement(){return this.#te}get svg(){return this.#ie}setNode(e){this.#Y=e}createLine(e,i){const n=t.UIUtils.createSVGChild(e,"line",i);return n.setAttribute("x1",P.AnimationMargin.toString()),n.setAttribute("y1",P.AnimationHeight.toString()),n.setAttribute("y2",P.AnimationHeight.toString()),n.style.stroke=this.#ae,n}drawAnimationLine(e,t){const i=this.#oe[e];i.animationLine||(i.animationLine=this.createLine(t,"animation-line")),i.animationLine&&i.animationLine.setAttribute("x2",(this.duration()*this.#J.pixelTimeRatio()+P.AnimationMargin).toFixed(2))}drawDelayLine(e){this.#le&&this.#de||(this.#le=this.createLine(e,"animation-delay-line"),this.#de=this.createLine(e,"animation-delay-line"));const t=this.#Z.source().fill();this.#le.classList.toggle("animation-fill","backwards"===t||"both"===t);const i=P.AnimationMargin;this.#le.setAttribute("x1",i.toString()),this.#le.setAttribute("x2",(this.delayOrStartTime()*this.#J.pixelTimeRatio()+i).toFixed(2));const n="forwards"===t||"both"===t;this.#de.classList.toggle("animation-fill",n);const o=Math.min(this.#J.width(),(this.delayOrStartTime()+this.duration()*this.#Z.source().iterations())*this.#J.pixelTimeRatio());this.#de.style.transform="translateX("+o.toFixed(2)+"px)",this.#de.setAttribute("x1",i.toString()),this.#de.setAttribute("x2",n?(this.#J.width()-o+i).toFixed(2):(this.#Z.source().endDelay()*this.#J.pixelTimeRatio()+i).toFixed(2))}drawPoint(e,n,o,r,s){if(this.#oe[e].keyframePoints[r])return void this.#oe[e].keyframePoints[r].setAttribute("cx",o.toFixed(2));const a=t.UIUtils.createSVGChild(n,"circle",r<=0?"animation-endpoint":"animation-keyframe-point");if(a.setAttribute("cx",o.toFixed(2)),a.setAttribute("cy",P.AnimationHeight.toString()),a.style.stroke=this.#ae,a.setAttribute("r",(P.AnimationMargin/2).toString()),a.setAttribute("jslog",`${i.controlPoint("animations.keyframe").track({drag:!0})}`),a.tabIndex=0,t.ARIAUtils.setLabel(a,S(r<=0?T.animationEndpointSlider:T.animationKeyframeSlider)),r<=0&&(a.style.fill=this.#ae),this.#oe[e].keyframePoints[r]=a,!s)return;let l;l=0===r?"StartEndpointMove":-1===r?"FinishEndpointMove":"KeyframeMove",this.animation().viewOrScrollTimeline()||(t.UIUtils.installDragHandle(a,this.mouseDown.bind(this,l,r),this.mouseMove.bind(this),this.mouseUp.bind(this),"ew-resize"),C.installDragHandleKeyboard(a,this.keydownMove.bind(this,l,r)))}renderKeyframe(e,i,n,o,r,s){function l(e,i,n){const o=t.UIUtils.createSVGChild(e,"line");o.setAttribute("x1",i.toString()),o.setAttribute("x2",i.toString()),o.setAttribute("y1",P.AnimationMargin.toString()),o.setAttribute("y2",P.AnimationHeight.toString()),o.style.stroke=n}const d=t.Geometry.CubicBezier.parse(s),c=this.#oe[e].keyframeRender;if(!c[i]){const e=d?t.UIUtils.createSVGChild(n,"path","animation-keyframe"):t.UIUtils.createSVGChild(n,"g","animation-keyframe-step");c[i]=e}const h=c[i];if(h.tabIndex=0,t.ARIAUtils.setLabel(h,S(T.sSlider,{PH1:this.#Z.name()})),h.style.transform="translateX("+o.toFixed(2)+"px)","linear"===s){h.style.fill=this.#ae;const e=a.BezierUI.Height;h.setAttribute("d",["M",0,e,"L",0,5,"L",r.toFixed(2),5,"L",r.toFixed(2),e,"Z"].join(" "))}else if(d)h.style.fill=this.#ae,a.BezierUI.BezierUI.drawVelocityChart(d,h,r);else{const e=A.parse(s);h.removeChildren();if(e){const t={start:0,middle:.5,end:1}[e.stepAtPosition];for(let i=0;i<e.steps;i++)l(h,(i+t)*r/e.steps,this.#ae)}}}redraw(){const e=this.#J.width()-P.AnimationMargin;if(this.#ie.setAttribute("width",(e+2*P.AnimationMargin).toFixed(2)),this.#ne.style.transform="translateX("+(this.delayOrStartTime()*this.#J.pixelTimeRatio()).toFixed(2)+"px)",this.#te.style.transform="translateX("+(Math.max(this.delayOrStartTime(),0)*this.#J.pixelTimeRatio()+P.AnimationMargin).toFixed(2)+"px)",this.#te.style.width=(this.duration()*this.#J.pixelTimeRatio()).toFixed(2)+"px",this.drawDelayLine(this.#ie),"CSSTransition"===this.#Z.type())return void this.renderTransition();this.renderIteration(this.#ne,0),this.#ce||(this.#ce=t.UIUtils.createSVGChild(this.#ne,"g","animation-tail-iterations"));const i=this.duration()*this.#J.pixelTimeRatio();let n;const o=this.delayOrStartTime()<0?-this.delayOrStartTime()*this.#J.pixelTimeRatio():0;for(n=1;n<this.#Z.source().iterations()&&i*(n-1)<o+this.#J.width()&&(i>0||this.#Z.source().iterations()!==1/0);n++)this.renderIteration(this.#ce,n);for(;n<this.#oe.length;){const e=this.#oe.pop();e?.group&&e.group.remove()}}renderTransition(){const e=this.#ne;this.#oe[0]||(this.#oe[0]={animationLine:null,keyframePoints:{},keyframeRender:{},group:null}),this.drawAnimationLine(0,e),this.renderKeyframe(0,0,e,P.AnimationMargin,this.duration()*this.#J.pixelTimeRatio(),this.#Z.source().easing()),this.drawPoint(0,e,P.AnimationMargin,0,!0),this.drawPoint(0,e,this.duration()*this.#J.pixelTimeRatio()+P.AnimationMargin,-1,!0)}renderIteration(e,i){this.#oe[i]||(this.#oe[i]={animationLine:null,keyframePoints:{},keyframeRender:{},group:t.UIUtils.createSVGChild(e,"g")});const n=this.#oe[i].group;if(n){if(n.style.transform="translateX("+(i*this.duration()*this.#J.pixelTimeRatio()).toFixed(2)+"px)",this.drawAnimationLine(i,n),this.#ee&&this.#ee.length>1)for(let e=0;e<this.#ee.length-1;e++){const t=this.offset(e)*this.duration()*this.#J.pixelTimeRatio()+P.AnimationMargin,o=this.duration()*(this.offset(e+1)-this.offset(e))*this.#J.pixelTimeRatio();this.renderKeyframe(i,e,n,t,o,this.#ee[e].easing()),(e||!e&&0===i)&&this.drawPoint(i,n,t,e,0===i)}this.drawPoint(i,n,this.duration()*this.#J.pixelTimeRatio()+P.AnimationMargin,-1,0===i)}}delayOrStartTime(){let e=this.#Z.delayOrStartTime();return"AnimationDrag"!==this.#he&&"StartEndpointMove"!==this.#he||(e+=this.#re),e}duration(){let e=this.#Z.iterationDuration();return"FinishEndpointMove"===this.#he?e+=this.#re:"StartEndpointMove"===this.#he&&(e-=this.#re),Math.max(0,e)}offset(e){if(!this.#ee)throw new Error("Unable to calculate offset; keyframes do not exist");let t=this.#ee[e].offsetAsNumber();return"KeyframeMove"===this.#he&&e===this.#me&&(console.assert(e>0&&e<this.#ee.length-1,"First and last keyframe cannot be moved"),t+=this.#re/this.#Z.iterationDuration(),t=Math.max(t,this.#ee[e-1].offsetAsNumber()),t=Math.min(t,this.#ee[e+1].offsetAsNumber())),t}mouseDown(e,i,o){const r=o;if(2===r.buttons)return!1;if(this.#ie.enclosingNodeOrSelfWithClass("animation-node-removed"))return!1;this.#he=e,this.#me=i,this.#ue=r.clientX,o.consume(!0);const s=t.ViewManager.ViewManager.instance(),a=s.locationNameForViewId("animations"),l=s.locationNameForViewId("elements");return this.#Y&&a!==l&&n.Revealer.reveal(this.#Y),!0}mouseMove(e){const t=e;this.setMovementAndRedraw((t.clientX-(this.#ue||0))/this.#J.pixelTimeRatio())}setMovementAndRedraw(e){this.#re=e,this.delayOrStartTime()+this.duration()>.8*this.#J.duration()&&this.#J.setDuration(1.2*this.#J.duration()),this.redraw()}mouseUp(e){const t=e;this.#re=(t.clientX-(this.#ue||0))/this.#J.pixelTimeRatio(),"KeyframeMove"===this.#he?this.#ee&&null!==this.#me&&void 0!==this.#me&&this.#ee[this.#me].setOffset(this.offset(this.#me)):this.#Z.setTiming(this.duration(),this.delayOrStartTime()),o.userMetrics.animationPointDragged("AnimationDrag"===this.#he?0:"KeyframeMove"===this.#he?1:"StartEndpointMove"===this.#he?2:"FinishEndpointMove"===this.#he?3:4),this.#re=0,this.redraw(),this.#he=void 0,this.#ue=void 0,this.#me=void 0}keydownMove(e,t,i){const n=i;switch(this.#he=e,this.#me=t,n.key){case"ArrowLeft":case"ArrowUp":this.#re=-this.#se;break;case"ArrowRight":case"ArrowDown":this.#re=this.#se;break;default:return}"KeyframeMove"===this.#he?this.#ee&&null!==this.#me&&this.#ee[this.#me].setOffset(this.offset(this.#me)):this.#Z.setTiming(this.duration(),this.delayOrStartTime()),this.setMovementAndRedraw(0),this.#he=void 0,this.#me=void 0,i.consume(!0)}onContextMenu(e){this.#Z.remoteObjectPromise().then((function(i){if(!i)return;const n=new t.ContextMenu.ContextMenu(e);n.appendApplicableItems(i),n.show()})),e.consume(!0)}}const P={AnimationHeight:26,AnimationSVGHeight:50,AnimationMargin:7,EndpointsClickRegionSize:10,GridCanvasHeight:40},G=new Map([["Purple",n.Color.parse("#9C27B0")],["Light Blue",n.Color.parse("#03A9F4")],["Deep Orange",n.Color.parse("#FF5722")],["Blue",n.Color.parse("#5677FC")],["Lime",n.Color.parse("#CDDC39")],["Blue Grey",n.Color.parse("#607D8B")],["Pink",n.Color.parse("#E91E63")],["Green",n.Color.parse("#0F9D58")],["Brown",n.Color.parse("#795548")],["Cyan",n.Color.parse("#00BCD4")]]);var E=Object.freeze({__proto__:null,AnimationUI:C,Colors:G,Options:P});class R{#pe;element;#be;#fe;#ie;#ve;constructor(n){this.#pe=n,this.element=document.createElement("button"),this.element.setAttribute("jslog",`${i.item("animations.buffer-preview"+(n.isScrollDriven()?"-sda":"")).track({click:!0})}`),this.element.classList.add("animation-buffer-preview"),this.element.addEventListener("animationend",(()=>{this.element.classList.add("no-animation")})),this.element.createChild("div","animation-paused fill"),n.isScrollDriven()?this.element.appendChild(e.Icon.create("mouse","preview-icon")):this.element.appendChild(e.Icon.create("watch","preview-icon")),this.#be=this.element.createChild("button","animation-remove-button"),this.#be.setAttribute("jslog",`${i.action("animations.remove-preview").track({click:!0})}`),this.#be.appendChild(e.Icon.create("cross")),this.#fe=this.element.createChild("div","animation-buffer-preview-animation"),this.#ie=t.UIUtils.createSVGChild(this.element,"svg"),this.#ie.setAttribute("width","100%"),this.#ie.setAttribute("preserveAspectRatio","none"),this.#ie.setAttribute("height","100%"),this.#ve=32,this.#ie.setAttribute("viewBox","0 0 100 "+this.#ve),this.#ie.setAttribute("shape-rendering","crispEdges"),this.render()}removeButton(){return this.#be}replay(){this.#fe.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.#ie.removeChildren();const e=Math.min(this.#pe.animations().length,10),i=100/Math.max(this.#pe.groupDuration(),750);for(let n=0;n<e;n++){const o=this.#pe.animations()[n],r=t.UIUtils.createSVGChild(this.#ie,"line"),s=o.delayOrStartTime(),a=s+o.iterationDuration();r.setAttribute("x1",String(s*i)),r.setAttribute("x2",String(a*i));const l=String(Math.floor(this.#ve/Math.max(6,e)*n+1));r.setAttribute("y1",l),r.setAttribute("y2",l),r.style.stroke=C.colorForAnimation(this.#pe.animations()[n])}}}var I=Object.freeze({__proto__:null,AnimationGroupPreviewUI:R});export{I as AnimationGroupPreviewUI,h as AnimationScreenshotPopover,k as AnimationTimeline,E as AnimationUI};