=this.datasets.data.at(this.datasets.startingIndices.at(o)+n.PerformanceViewerCollector.NumberOfPointsOffset))continue;const e=this.datasets.startingIndices.at(o)+n.PerformanceViewerCollector.SliceDataOffset+t,a=this.datasets.data.at(e);ar&&(r=a)}return{min:s,max:r}}_getPixelForNumber(e,t,s,r,n){const{min:o,max:a}=t;let i=Math.abs(a-o)>.001?(e-o)/(a-o):.5;return n&&(i=1-i),s+i*r}_attachEventListeners(e){e.addEventListener("wheel",this._handleZoom),e.addEventListener("mousemove",this._handleDataHover),e.addEventListener("mousedown",this._handlePanStart),e.addEventListener("mouseleave",this._handleStopHover),e.ownerDocument.addEventListener("mouseup",this._handlePanStop)}_removeEventListeners(e){e.removeEventListener("wheel",this._handleZoom),e.removeEventListener("mousemove",this._handleDataHover),e.removeEventListener("mousedown",this._handlePanStart),e.removeEventListener("mouseleave",this._handleStopHover),e.ownerDocument.removeEventListener("mouseup",this._handlePanStop)}_getDistanceFromLine(e,t,s,r,n,o){if(e===s&&t===r)return Math.sqrt(Math.pow(e-n,2)+Math.pow(t-o,2));let a=0,i=0,l=0,p=0;return t>=r?(a=e,i=t,l=s,p=r):(a=s,i=r,l=e,p=t),oi?Math.sqrt(Math.pow(a-n,2)+Math.pow(i-o,2)):Math.abs((s-e)*(t-o)-(e-n)*(r-t))/Math.sqrt(Math.pow(s-e,2)+Math.pow(r-t,2))}_preprocessTooltip(e,t){const{_ctx:s}=this;if(null===e||!s||!s.canvas||0===this._getNumberOfSlices())return;const{left:r,top:o}=s.canvas.getBoundingClientRect(),a=e.yPos-o;let i=e.xPos-r;i>t.right&&(i=t.right);const l=this._getNumberFromPixel(i,this._globalTimeMinMax,t.left,t.right,!1);let p="",c=0;const d=this._getClosestPointToTimestamp(l);let h=0,u="",b={min:0,max:0},A=Number.POSITIVE_INFINITY;this.datasets.ids.forEach(((s,o)=>{if(this.metadata.get(s)?.hidden)return;if(o>=this.datasets.data.at(this.datasets.startingIndices.at(d)+n.PerformanceViewerCollector.NumberOfPointsOffset))return;const i=this.datasets.startingIndices.at(d)+n.PerformanceViewerCollector.SliceDataOffset+o,l=this.datasets.data.at(i);let m;for(let e=0;ep.length&&(p=f),this._tooltipItems[c].text=f,this._tooltipItems[c].color=this.metadata.get(s)?.color??nn,c++,!this._position)return;let v=this._getDistanceFromLine(C,g,C,g,e.xPos-r,a);if(d+1o){const s=this.datasets.data.at(this.datasets.startingIndices.at(d+1)),i=this._getPixelForNumber(s,this._globalTimeMinMax,t.left,t.right-t.left,!1),l=this.datasets.data.at(this.datasets.startingIndices.at(d+1)+n.PerformanceViewerCollector.SliceDataOffset+o),p=this._getPixelForNumber(l,m,t.top,t.bottom-t.top,!0);v=Math.min(this._getDistanceFromLine(C,g,i,p,e.xPos-r,a),v)}if(d-1>=0&&this.datasets.data.at(this.datasets.startingIndices.at(d+1)+n.PerformanceViewerCollector.NumberOfPointsOffset)>o){const s=this.datasets.data.at(this.datasets.startingIndices.at(d-1)),i=this._getPixelForNumber(s,this._globalTimeMinMax,t.left,t.right-t.left,!1),l=this.datasets.data.at(this.datasets.startingIndices.at(d-1)+n.PerformanceViewerCollector.SliceDataOffset+o),p=this._getPixelForNumber(l,m,t.top,t.bottom-t.top,!0);v=Math.min(this._getDistanceFromLine(C,g,i,p,e.xPos-r,a),v)}vthis._width&&(u-=d),s.globalAlpha=.8,s.fillStyle="#566268",s.fillRect(u,b,d,h),s.globalAlpha=1,u+=10,b+=c;for(let e=0;e.998}_drawPlayheadRegion(e,t){const{_ctx:s}=this;if(!s||t>=.95)return;const r=Math.ceil(e.right*t),n=r-8,o=r+2,a=e.bottom-e.top-1;s.save(),s.fillStyle="#dfe9ed",s.fillRect(o,e.top,e.right-o,a),s.fillStyle="#0a3066",s.fillRect(r,e.top,2,a),s.fillStyle="#b9dbef",s.fillRect(n,e.top,8,a),s.restore()}destroy(){this._ctx&&this._ctx.canvas&&(this._removeEventListeners(this._ctx.canvas),this._ctx=null)}clear(){const{_ctx:e,_width:t,_height:s}=this;e&&(e.save(),e.resetTransform(),e.clearRect(0,0,t,s),e.restore())}}const bn=e=>{const{id:t,collector:r,scene:a,layoutObservable:i,returnToPlayheadObservable:l,onVisibleRangeChangedObservable:p,initialGraphSize:c}=e,d=(0,s.useRef)(null);return(0,s.useEffect)((()=>{if(!d.current)return;let e;c&&(d.current.width=c.width,d.current.height=c.height);try{e=new un(d.current,{datasets:r.datasets,onVisibleRangeChangedObservable:p})}catch(e){return void n.Logger.Error(e)}const t=t=>{if(!d.current)return;const{left:s,top:r}=d.current.getBoundingClientRect();t.width=t.width-s,t.height=t.height-r,e?.resize(t)},s=()=>{e?.update()},o=t=>{e&&(e.metadata=t,e.update())};return a.onAfterRenderObservable.add(s),r.metadataObservable.add(o),i?.add(t),l?.add((()=>{e?.resetDataPosition()})),()=>{e?.destroy(),i?.removeCallback(t),a.onAfterRenderObservable.removeCallback(s),r.metadataObservable.removeCallback(o)}}),[d]),(0,o.jsx)("canvas",{id:t,ref:d})},An=e=>{const{scene:t,layoutObservable:r,returnToLiveObservable:a,performanceCollector:i,initialGraphSize:l}=e,[p]=(0,s.useState)(new n.Observable);return(0,o.jsxs)("div",{id:"performance-viewer",children:[(0,o.jsx)(sn,{returnToPlayhead:a}),(0,o.jsx)(tn,{collector:i,onVisibleRangeChangedObservable:p}),(0,o.jsx)(bn,{id:"performance-viewer-graph",returnToPlayheadObservable:a,layoutObservable:r,scene:t,collector:i,onVisibleRangeChangedObservable:p,initialGraphSize:l})]})};var mn=p(5030),gn={};gn.styleTagTransform=Gr(),gn.setAttributes=Rr(),gn.insert=Tr().bind(null,"head"),gn.domAPI=Ir(),gn.insertStyleElement=Br(),Pr()(mn.A,gn),mn.A&&mn.A.locals&&mn.A.locals;const Cn={width:1024,height:512},fn={width:724,height:512};var vn;!function(e){e.Count="Count",e.FrameSteps="Frame Steps Duration"}(vn||(vn={}));const xn=[{strategyCallback:n.PerfCollectionStrategy.FpsStrategy()},{strategyCallback:n.PerfCollectionStrategy.TotalMeshesStrategy(),category:vn.Count,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.ActiveMeshesStrategy(),category:vn.Count,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.ActiveIndicesStrategy(),category:vn.Count,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.ActiveBonesStrategy(),category:vn.Count,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.ActiveParticlesStrategy(),category:vn.Count,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.DrawCallsStrategy(),category:vn.Count,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.TotalLightsStrategy(),category:vn.Count,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.TotalVerticesStrategy(),category:vn.Count,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.TotalMaterialsStrategy(),category:vn.Count,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.TotalTexturesStrategy(),category:vn.Count,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.AbsoluteFpsStrategy(),category:vn.FrameSteps,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.MeshesSelectionStrategy(),category:vn.FrameSteps,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.RenderTargetsStrategy(),category:vn.FrameSteps,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.ParticlesStrategy(),category:vn.FrameSteps,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.SpritesStrategy(),category:vn.FrameSteps,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.AnimationsStrategy(),category:vn.FrameSteps,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.PhysicsStrategy(),category:vn.FrameSteps,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.RenderStrategy(),category:vn.FrameSteps,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.FrameTotalStrategy(),category:vn.FrameSteps,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.InterFrameStrategy(),category:vn.FrameSteps,hidden:!0},{strategyCallback:n.PerfCollectionStrategy.GpuFrameTimeStrategy(),category:vn.FrameSteps,hidden:!0}],yn=e=>{const{scene:t}=e,[r,a]=(0,s.useState)(!1),[i,l]=(0,s.useState)(!1),[p,c]=(0,s.useState)(),[d]=(0,s.useState)(new n.Observable),[h]=(0,s.useState)(new n.Observable),u=e=>{e&&e.close(),l(!1),a(!1)};(0,s.useEffect)((()=>{i||p&&(p.stop(),p.clear(!1),m(p))}),[i]);const b=()=>{p&&Lp._CreatePersistentPopup({props:{id:"performance-viewer",title:"Realtime Performance Viewer",onClose:u,onResize:A,size:Cn},children:(0,o.jsx)(An,{scene:t,layoutObservable:d,returnToLiveObservable:h,performanceCollector:p,initialGraphSize:fn})},document.body)},A=e=>{const t=e?.innerWidth??0,s=e?.innerHeight??0;d.notifyObservers({width:t,height:s})},m=e=>{e.addCollectionStrategies(...xn),n.PressureObserverWrapper.IsAvailable&&e.addCollectionStrategies({strategyCallback:n.PerfCollectionStrategy.PressureStrategy(),category:vn.FrameSteps,hidden:!0})};return(0,s.useEffect)((()=>{const e=t.getPerfCollector();m(e),c(e)}),[]),(0,o.jsxs)(Or,{title:"Performance Viewer",children:[!r&&(0,o.jsx)(Mr,{label:"Open Realtime Perf Viewer",onClick:()=>{a(!0),p?.start(!0),b()}}),!r&&(0,o.jsx)(wr,{accept:"csv",label:"Load Perf Viewer using CSV",onClick:e=>{n.Tools.ReadFile(e,(e=>{a(!1),l(!0),p?.stop();const t=p?.loadFromFileData(e);t?b():(a(!1),p?.start(!0))}))}}),(0,o.jsx)(Mr,{label:"Export Perf to CSV",onClick:()=>{p?.exportDataToCsv()}}),!r&&(0,o.jsx)(Mr,{label:p?.isStarted?"Stop Recording":"Begin Recording",onClick:()=>{p?.isStarted?p?.stop():p?.start(!0)}})]})};class On extends xr{constructor(e){super(e);const t=this.props.scene;t&&(this._sceneInstrumentation=new n.SceneInstrumentation(t),this._sceneInstrumentation.captureActiveMeshesEvaluationTime=!0,this._sceneInstrumentation.captureRenderTargetsRenderTime=!0,this._sceneInstrumentation.captureFrameTime=!0,this._sceneInstrumentation.captureRenderTime=!0,this._sceneInstrumentation.captureInterFrameTime=!0,this._sceneInstrumentation.captureParticlesRenderTime=!0,this._sceneInstrumentation.captureSpritesRenderTime=!0,this._sceneInstrumentation.capturePhysicsTime=!0,this._sceneInstrumentation.captureAnimationsTime=!0,this._engineInstrumentation=new n.EngineInstrumentation(t.getEngine()),this._engineInstrumentation.captureGPUFrameTime=!0,this._timerIntervalId=window.setInterval((()=>this.forceUpdate()),500))}componentWillUnmount(){this._sceneInstrumentation&&(this._sceneInstrumentation.dispose(),this._sceneInstrumentation=null),this._engineInstrumentation&&(this._engineInstrumentation.dispose(),this._engineInstrumentation=null),window.clearInterval(this._timerIntervalId)}render(){const e=this.props.scene;if(!e||!this._sceneInstrumentation||!this._engineInstrumentation)return null;const t=e.getEngine(),s=this._sceneInstrumentation,r=this._engineInstrumentation,a=t.getCaps();return(0,o.jsxs)("div",{className:"pane",children:[(0,o.jsx)(yr,{label:"Version",value:n.Engine.Version,color:"rgb(113, 159, 255)"}),(0,o.jsx)(jr,{label:"FPS",value:t.getFps(),fractionDigits:0}),(0,o.jsx)(yn,{scene:e}),(0,o.jsxs)(Or,{title:"COUNT",children:[(0,o.jsx)(yr,{label:"Total meshes",value:e.meshes.length.toString()}),(0,o.jsx)(yr,{label:"Active meshes",value:e.getActiveMeshes().length.toString()}),(0,o.jsx)(yr,{label:"Active indices",value:e.getActiveIndices().toString()}),(0,o.jsx)(yr,{label:"Active faces",value:(e.getActiveIndices()/3).toString()}),(0,o.jsx)(yr,{label:"Active bones",value:e.getActiveBones().toString()}),(0,o.jsx)(yr,{label:"Active particles",value:e.getActiveParticles().toString()}),(0,o.jsx)(yr,{label:"Draw calls",value:s.drawCallsCounter.current.toString()}),(0,o.jsx)(yr,{label:"Total lights",value:e.lights.length.toString()}),(0,o.jsx)(yr,{label:"Total vertices",value:e.getTotalVertices().toString()}),(0,o.jsx)(yr,{label:"Total materials",value:e.materials.length.toString()}),(0,o.jsx)(yr,{label:"Total textures",value:e.textures.length.toString()})]}),(0,o.jsxs)(Or,{title:"FRAME STEPS DURATION",children:[(0,o.jsx)(jr,{label:"Absolute FPS",value:1e3/this._sceneInstrumentation.frameTimeCounter.lastSecAverage,fractionDigits:0}),(0,o.jsx)(jr,{label:"Meshes selection",value:s.activeMeshesEvaluationTimeCounter.lastSecAverage,units:"ms"}),(0,o.jsx)(jr,{label:"Render targets",value:s.renderTargetsRenderTimeCounter.lastSecAverage,units:"ms"}),(0,o.jsx)(jr,{label:"Particles",value:s.particlesRenderTimeCounter.lastSecAverage,units:"ms"}),(0,o.jsx)(jr,{label:"Sprites",value:s.spritesRenderTimeCounter.lastSecAverage,units:"ms"}),(0,o.jsx)(jr,{label:"Animations",value:s.animationsTimeCounter.lastSecAverage,units:"ms"}),(0,o.jsx)(jr,{label:"Physics",value:s.physicsTimeCounter.lastSecAverage,units:"ms"}),(0,o.jsx)(jr,{label:"Render",value:s.renderTimeCounter.lastSecAverage,units:"ms"}),(0,o.jsx)(jr,{label:"Frame total",value:s.frameTimeCounter.lastSecAverage,units:"ms"}),(0,o.jsx)(jr,{label:"Inter-frame",value:s.interFrameTimeCounter.lastSecAverage,units:"ms"}),(0,o.jsx)(jr,{label:"GPU Frame time",value:1e-6*r.gpuFrameTimeCounter.lastSecAverage,units:"ms"}),(0,o.jsx)(jr,{label:"GPU Frame time (average)",value:1e-6*r.gpuFrameTimeCounter.average,units:"ms"})]}),(0,o.jsxs)(Or,{title:"SYSTEM INFO",children:[(0,o.jsx)(yr,{label:"Resolution",value:t.getRenderWidth()+"x"+t.getRenderHeight()}),(0,o.jsx)(yr,{label:"Hardware scaling level",value:t.getHardwareScalingLevel().toString()}),(0,o.jsx)(yr,{label:"Engine",value:t.description}),(0,o.jsx)(Sr,{label:"Std derivatives",value:a.standardDerivatives}),(0,o.jsx)(Sr,{label:"Compressed textures",value:void 0!==a.s3tc}),(0,o.jsx)(Sr,{label:"Hardware instances",value:a.instancedArrays}),(0,o.jsx)(Sr,{label:"Texture float",value:a.textureFloat}),(0,o.jsx)(Sr,{label:"Texture half-float",value:a.textureHalfFloat}),(0,o.jsx)(Sr,{label:"Render to texture float",value:a.textureFloatRender}),(0,o.jsx)(Sr,{label:"Render to texture half-float",value:a.textureHalfFloatRender}),(0,o.jsx)(Sr,{label:"32bits indices",value:a.uintIndices}),(0,o.jsx)(Sr,{label:"Fragment depth",value:a.fragmentDepthSupported}),(0,o.jsx)(Sr,{label:"High precision shaders",value:a.highPrecisionShaderSupported}),(0,o.jsx)(Sr,{label:"Draw buffers",value:a.drawBuffersExtension}),(0,o.jsx)(Sr,{label:"Vertex array object",value:a.vertexArrayObject}),(0,o.jsx)(Sr,{label:"Timer query",value:void 0!==a.timerQuery}),(0,o.jsx)(Sr,{label:"Stencil",value:t.isStencilEnable}),(0,o.jsx)(Sr,{label:"Parallel shader compilation",value:null!=a.parallelShaderCompile}),(0,o.jsx)(jr,{label:"Max textures units",value:a.maxTexturesImageUnits,fractionDigits:0}),(0,o.jsx)(jr,{label:"Max textures size",value:a.maxTextureSize,fractionDigits:0}),(0,o.jsx)(jr,{label:"Max anisotropy",value:a.maxAnisotropy,fractionDigits:0}),(0,o.jsx)(yr,{label:"Driver",value:t.extractDriverInfo()})]})]})}}var jn=p(4208);class Sn extends s.Component{constructor(e){super(e),this.state={isEnabled:!1}}componentDidMount(){const e=n.UtilityLayerRenderer.DefaultKeepDepthUtilityLayer.utilityLayerScene;for(const t of e.meshes)if(t.reservedDataStore&&t.reservedDataStore.isInspectorGrid)return this._gridMesh=t,void this.setState({isEnabled:!0})}addOrRemoveGrid(){const e=n.UtilityLayerRenderer.DefaultKeepDepthUtilityLayer.utilityLayerScene;if(!this._gridMesh){const t=this.props.scene.getWorldExtends(),s=5*(t.max.x-t.min.x),r=5*(t.max.z-t.min.z);this._gridMesh=(0,n.CreateGround)("grid",{width:1,height:1,subdivisions:1},e),this._gridMesh.reservedDataStore||(this._gridMesh.reservedDataStore={}),this._gridMesh.scaling.x=Math.max(s,r),this._gridMesh.scaling.z=this._gridMesh.scaling.x,this._gridMesh.reservedDataStore.isInspectorGrid=!0,this._gridMesh.isPickable=!1;const o=new jn.GridMaterial("GridMaterial",e);return o.majorUnitFrequency=10,o.minorUnitVisibility=.3,o.gridRatio=.01,o.backFaceCulling=!1,o.mainColor=new n.Color3(1,1,1),o.lineColor=new n.Color3(1,1,1),o.opacity=.8,o.zOffset=1,o.opacityTexture=new n.Texture("https://assets.babylonjs.com/environments/backgroundGround.png",e),this._gridMesh.material=o,void this.setState({isEnabled:!0})}this.setState({isEnabled:!this.state.isEnabled}),this._gridMesh.dispose(!0,!0),this._gridMesh=null}render(){return(0,o.jsx)("div",{children:(0,o.jsx)(en,{label:"Render grid",isSelected:()=>this.state.isEnabled,onSelect:()=>this.addOrRemoveGrid()})})}}var Mn=p(5992);class wn extends xr{constructor(e){super(e),this._physicsViewersEnabled=!1;const t=this.props.scene;t&&(t.reservedDataStore||(t.reservedDataStore={}),this._physicsViewersEnabled=null!=t.reservedDataStore.physicsViewer)}switchPhysicsViewers(){this._physicsViewersEnabled=!this._physicsViewersEnabled;const e=this.props.scene;if(this._physicsViewersEnabled){const t=new Mn.PhysicsViewer(e);e.reservedDataStore.physicsViewer=t;for(const s of e.meshes)if(s.physicsImpostor){const e=t.showImpostor(s.physicsImpostor,s);e&&(e.reservedDataStore={hidden:!0},e.material.reservedDataStore={hidden:!0})}else if(s.physicsBody){const e=t.showBody(s.physicsBody);e&&(e.reservedDataStore={hidden:!0},e.material.reservedDataStore={hidden:!0})}for(const s of e.transformNodes)if(s.physicsBody){const e=t.showBody(s.physicsBody);e&&(e.reservedDataStore={hidden:!0},e.material.reservedDataStore={hidden:!0})}}else e.reservedDataStore.physicsViewer.dispose(),e.reservedDataStore.physicsViewer=null}render(){const e=this.props.scene;return e?(0,o.jsxs)("div",{className:"pane",children:[(0,o.jsxs)(Or,{title:"HELPERS",selection:this.props.globalState,children:[(0,o.jsx)(Sn,{globalState:this.props.globalState,scene:e}),(0,o.jsx)(en,{label:"Physics",isSelected:()=>this._physicsViewersEnabled,onSelect:()=>this.switchPhysicsViewers()})]}),(0,o.jsxs)(Or,{title:"CORE TEXTURE CHANNELS",selection:this.props.globalState,children:[(0,o.jsx)(en,{label:"Diffuse",isSelected:()=>n.StandardMaterial.DiffuseTextureEnabled,onSelect:()=>n.StandardMaterial.DiffuseTextureEnabled=!n.StandardMaterial.DiffuseTextureEnabled}),(0,o.jsx)(en,{label:"Ambient",isSelected:()=>n.StandardMaterial.AmbientTextureEnabled,onSelect:()=>n.StandardMaterial.AmbientTextureEnabled=!n.StandardMaterial.AmbientTextureEnabled}),(0,o.jsx)(en,{label:"Specular",isSelected:()=>n.StandardMaterial.SpecularTextureEnabled,onSelect:()=>n.StandardMaterial.SpecularTextureEnabled=!n.StandardMaterial.SpecularTextureEnabled}),(0,o.jsx)(en,{label:"Emissive",isSelected:()=>n.StandardMaterial.EmissiveTextureEnabled,onSelect:()=>n.StandardMaterial.EmissiveTextureEnabled=!n.StandardMaterial.EmissiveTextureEnabled}),(0,o.jsx)(en,{label:"Bump",isSelected:()=>n.StandardMaterial.BumpTextureEnabled,onSelect:()=>n.StandardMaterial.BumpTextureEnabled=!n.StandardMaterial.BumpTextureEnabled}),(0,o.jsx)(en,{label:"Opacity",isSelected:()=>n.StandardMaterial.OpacityTextureEnabled,onSelect:()=>n.StandardMaterial.OpacityTextureEnabled=!n.StandardMaterial.OpacityTextureEnabled}),(0,o.jsx)(en,{label:"Reflection",isSelected:()=>n.StandardMaterial.ReflectionTextureEnabled,onSelect:()=>n.StandardMaterial.ReflectionTextureEnabled=!n.StandardMaterial.ReflectionTextureEnabled}),(0,o.jsx)(en,{label:"Refraction",isSelected:()=>n.StandardMaterial.RefractionTextureEnabled,onSelect:()=>n.StandardMaterial.RefractionTextureEnabled=!n.StandardMaterial.RefractionTextureEnabled}),(0,o.jsx)(en,{label:"ColorGrading",isSelected:()=>n.StandardMaterial.ColorGradingTextureEnabled,onSelect:()=>n.StandardMaterial.ColorGradingTextureEnabled=!n.StandardMaterial.ColorGradingTextureEnabled}),(0,o.jsx)(en,{label:"Lightmap",isSelected:()=>n.StandardMaterial.LightmapTextureEnabled,onSelect:()=>n.StandardMaterial.LightmapTextureEnabled=!n.StandardMaterial.LightmapTextureEnabled}),(0,o.jsx)(en,{label:"Fresnel",isSelected:()=>n.StandardMaterial.FresnelEnabled,onSelect:()=>n.StandardMaterial.FresnelEnabled=!n.StandardMaterial.FresnelEnabled}),(0,o.jsx)(en,{label:"Detail",isSelected:()=>n.MaterialFlags.DetailTextureEnabled,onSelect:()=>n.MaterialFlags.DetailTextureEnabled=!n.MaterialFlags.DetailTextureEnabled}),(0,o.jsx)(en,{label:"Decal",isSelected:()=>n.MaterialFlags.DecalMapEnabled,onSelect:()=>n.MaterialFlags.DecalMapEnabled=!n.MaterialFlags.DecalMapEnabled})]}),(0,o.jsxs)(Or,{title:"FEATURES",selection:this.props.globalState,children:[(0,o.jsx)(en,{label:"Animations",isSelected:()=>e.animationsEnabled,onSelect:()=>e.animationsEnabled=!e.animationsEnabled}),(0,o.jsx)(en,{label:"Physics",isSelected:()=>e.physicsEnabled,onSelect:()=>e.physicsEnabled=!e.physicsEnabled}),(0,o.jsx)(en,{label:"Collisions",isSelected:()=>e.collisionsEnabled,onSelect:()=>e.collisionsEnabled=!e.collisionsEnabled}),(0,o.jsx)(en,{label:"Fog",isSelected:()=>e.fogEnabled,onSelect:()=>e.fogEnabled=!e.fogEnabled}),(0,o.jsx)(en,{label:"Lens flares",isSelected:()=>e.lensFlaresEnabled,onSelect:()=>e.lensFlaresEnabled=!e.lensFlaresEnabled}),(0,o.jsx)(en,{label:"Lights",isSelected:()=>e.lightsEnabled,onSelect:()=>e.lightsEnabled=!e.lightsEnabled}),(0,o.jsx)(en,{label:"Particles",isSelected:()=>e.particlesEnabled,onSelect:()=>e.particlesEnabled=!e.particlesEnabled}),(0,o.jsx)(en,{label:"Post-processes",isSelected:()=>e.postProcessesEnabled,onSelect:()=>e.postProcessesEnabled=!e.postProcessesEnabled}),(0,o.jsx)(en,{label:"Probes",isSelected:()=>e.probesEnabled,onSelect:()=>e.probesEnabled=!e.probesEnabled}),(0,o.jsx)(en,{label:"Textures",isSelected:()=>e.texturesEnabled,onSelect:()=>e.texturesEnabled=!e.texturesEnabled}),(0,o.jsx)(en,{label:"Procedural textures",isSelected:()=>e.proceduralTexturesEnabled,onSelect:()=>e.proceduralTexturesEnabled=!e.proceduralTexturesEnabled}),(0,o.jsx)(en,{label:"Render targets",isSelected:()=>e.renderTargetsEnabled,onSelect:()=>e.renderTargetsEnabled=!e.renderTargetsEnabled}),(0,o.jsx)(en,{label:"Shadows",isSelected:()=>e.shadowsEnabled,onSelect:()=>e.shadowsEnabled=!e.shadowsEnabled}),(0,o.jsx)(en,{label:"Skeletons",isSelected:()=>e.skeletonsEnabled,onSelect:()=>e.skeletonsEnabled=!e.skeletonsEnabled}),(0,o.jsx)(en,{label:"Sprites",isSelected:()=>e.spritesEnabled,onSelect:()=>e.spritesEnabled=!e.spritesEnabled})]})]}):null}}var Nn,Ln=(Nn=function(e,t){return Nn=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s])},Nn(e,t)},function(e,t){function s(){this.constructor=e}Nn(e,t),e.prototype=null===t?Object.create(t):(s.prototype=t.prototype,new s)}),kn=function(){return kn=Object.assign||function(e){for(var t,s=1,r=arguments.length;s{this.props.incrementValue(-e.movementY)},this._releaseListener=()=>{this.props.setDragging(!1),this._arrowsRef.current?.ownerDocument.exitPointerLock(),this._arrowsRef.current?.ownerDocument.defaultView.removeEventListener("pointerup",this._releaseListener),this._arrowsRef.current?.ownerDocument.removeEventListener("pointerlockchange",this._lockChangeListener),this._arrowsRef.current?.ownerDocument.defaultView.removeEventListener("mousemove",this._drag)},this._lockChangeListener=()=>{this._arrowsRef.current?.ownerDocument.pointerLockElement!==this._arrowsRef.current&&this._releaseListener()}}render(){return(0,o.jsxs)("div",{className:"arrows",ref:this._arrowsRef,onPointerDown:()=>{this._arrowsRef.current?.ownerDocument.addEventListener("pointerlockchange",this._lockChangeListener),this._arrowsRef.current?.ownerDocument.defaultView.addEventListener("pointerup",this._releaseListener),this._arrowsRef.current?.ownerDocument.defaultView.addEventListener("mousemove",this._drag),this.props.setDragging(!0),this._arrowsRef.current?.requestPointerLock()},onDragStart:e=>e.preventDefault(),children:[(0,o.jsx)("img",{className:"upArrowIcon",src:"data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE1IDE1Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzMzMzt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNC4wOSw5LjQ1YS42LjYsMCwwLDEsMC0uODRsMy0zYS42LjYsMCwwLDEsLjg0LDBsMywzYS42LjYsMCwwLDEsMCwuODQuNjEuNjEsMCwwLDEtLjg1LDBsLTItMnY1LjczYS42LjYsMCwwLDEtMS4yLDBWNy40OGwtMiwyQS42MS42MSwwLDAsMSw0LjA5LDkuNDVaIi8+PC9zdmc+",alt:"Increase Value"}),(0,o.jsx)("img",{className:"downArrowIcon",src:"data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE1IDE1Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzMzMzt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNC4wOSw1LjU1YS42MS42MSwwLDAsMSwuODUsMGwyLDJWMS43OWEuNi42LDAsMSwxLDEuMiwwVjcuNTJsMi0yYS42MS42MSwwLDAsMSwuODUsMCwuNi42LDAsMCwxLDAsLjg0bC0zLDNhLjYuNiwwLDAsMS0uODQsMGwtMy0zQS42LjYsMCwwLDEsNC4wOSw1LjU1WiIvPjwvc3ZnPg==",alt:"Increase Value"})]})}}class Kn extends s.Component{constructor(e){super(e),this._localChange=!1;const t=this.props.target[this.props.propertyName];this.state={value:this.getValueString(t,this.props),dragging:!1},this._store=t}componentWillUnmount(){this.unlock()}getValueString(e,t){return e?e===Kr?Kr:t.isInteger?e.toFixed(0):e.toFixed(t.digits||4):"0"}shouldComponentUpdate(e,t){if(this._localChange)return this._localChange=!1,!0;const s=e.target[e.propertyName],r=this.getValueString(s,e);return r!==t.value?(t.value=r,!0):t.dragging!=this.state.dragging||e.unit!==this.props.unit||e.isInteger!==this.props.isInteger}raiseOnPropertyChanged(e,t){this.props.onChange&&this.props.onChange(e),this.props.onPropertyChangedObservable&&this.props.onPropertyChangedObservable.notifyObservers({object:this.props.target,property:this.props.propertyName,value:e,initialValue:t})}updateValue(e){if(/[^0-9.-]/g.test(e))return;let t;t=this.props.isInteger?parseInt(e):parseFloat(e),isNaN(t)?null!=this.props.defaultValue&&(t=this.props.defaultValue):(void 0!==this.props.min&&tthis.props.max&&(t=this.props.max,e=t.toString())),this._localChange=!0,this.setState({value:e}),isNaN(t)||(this.props.target[this.props.propertyName]=t,this.raiseOnPropertyChanged(t,this._store),this._store=t)}lock(){this.props.lockObject&&(this.props.lockObject.lock=!0)}unlock(){this.props.lockObject&&(this.props.lockObject.lock=!1)}incrementValue(e,t=!0){t&&this.props.step&&(e*=parseFloat(this.props.step));let s=parseFloat(this.state.value);isNaN(s)&&(s=0),this.updateValue((s+e).toFixed(2))}onKeyDown(e){const t=parseFloat(this.props.step||this.props.isInteger?"1":"0.01"),s=s=>{e.shiftKey&&(s*=10,(e.ctrlKey||e.metaKey)&&(s*=10)),this.incrementValue(s*t,!1),e.preventDefault()};"ArrowUp"===e.key?s(1):"ArrowDown"===e.key&&s(-1),"Enter"===e.key&&this.props.onEnter&&this.props.onEnter(this._store)}onCopyClick(){if(this.props&&this.props.target){const{className:e,babylonNamespace:t}=Qr(this.props.target);Jr("globalThis.debugNode."+this.props.propertyName+" = "+this.props.target[this.props.propertyName]+";// (debugNode as "+t+e+")")}else Jr("undefined")}render(){let e;e=this.props.isInteger?parseInt(this.state.value):parseFloat(this.state.value);let t=this.props.smallUI?"short":"value";this.state.dragging&&(t+=" dragging"),this.props.arrows&&(t+=" hasArrows");const s=this.state.value===Kr?"":this.state.value,r=this.state.value===Kr?Kr:"";return(0,o.jsxs)(o.Fragment,{children:[!this.props.useEuler&&(0,o.jsxs)("div",{className:this.props.additionalClass?this.props.additionalClass+" floatLine":"floatLine",children:[this.props.icon&&(0,o.jsx)("img",{src:this.props.icon,title:this.props.iconLabel,alt:this.props.iconLabel,className:"icon"}),(!this.props.icon||""!=this.props.label)&&(0,o.jsx)("div",{className:"label",title:this.props.label,children:this.props.label}),(0,o.jsxs)("div",{className:t,children:[(0,o.jsx)("input",{type:"number",step:this.props.step||this.props.isInteger?"1":"0.01",className:"numeric-input",onKeyDown:e=>this.onKeyDown(e),value:s,onBlur:()=>{this.unlock(),this.props.onEnter&&this.props.onEnter(this._store)},placeholder:r,onFocus:()=>this.lock(),onChange:e=>this.updateValue(e.target.value),disabled:this.props.disabled}),this.props.arrows&&(0,o.jsx)(Qn,{incrementValue:e=>this.incrementValue(e),setDragging:t=>{const s=this.state.dragging;!s&&t&&this.props.onDragStart?this.props.onDragStart(e):s&&!t&&this.props.onDragStop&&this.props.onDragStop(e),this.setState({dragging:t})}})]}),this.props.unit,(0,o.jsx)("div",{className:"copy hoverIcon",onClick:()=>this.onCopyClick(),title:"Copy to clipboard",children:(0,o.jsx)("img",{src:qr,alt:"Copy"})})]}),this.props.useEuler&&(0,o.jsx)(Xn,{lockObject:this.props.lockObject,label:this.props.label,minimum:0,maximum:360,step:.1,directValue:n.Tools.ToDegrees(e),onChange:e=>this.updateValue(n.Tools.ToRadians(e).toString())})]})}}class Xn extends s.Component{constructor(e){if(super(e),this._localChange=!1,void 0!==this.props.directValue)this.state={value:this.props.directValue};else{let e=this.props.target[this.props.propertyName];void 0===e&&(e=this.props.maximum),this.state={value:e}}}shouldComponentUpdate(e,t){if(void 0!==e.directValue)return t.value=e.directValue,!0;if(e.label!==this.props.label)return!0;let s=e.target[e.propertyName];return void 0===s&&(s=e.maximum),s!==t.value||this._localChange||e.maximum!==this.props.maximum||e.minimum!==this.props.minimum?(t.value=s,this._localChange=!1,!0):e.unit!==this.props.unit}onChange(e){if("—"===e)return;this._localChange=!0;let t=parseFloat(e);this.props.useEuler&&(t=n.Tools.ToRadians(t)),this.props.target&&(this.props.onPropertyChangedObservable&&this.props.onPropertyChangedObservable.notifyObservers({object:this.props.target,property:this.props.propertyName,value:t,initialValue:this.state.value}),this.props.target[this.props.propertyName]=t),this.props.onChange&&this.props.onChange(t),this.setState({value:t})}onInput(e){const t=parseFloat(e);this.props.onInput&&this.props.onInput(t)}prepareDataToRead(e){return null===e&&(e=0),this.props.useEuler?n.Tools.ToDegrees(e):e}onCopyClick(){if(this.props&&this.props.target){const{className:e,babylonNamespace:t}=Qr(this.props.target);Jr("globalThis.debugNode."+this.props.propertyName+" = "+this.props.target[this.props.propertyName]+";// (debugNode as "+t+e+")")}else Jr("undefined")}render(){return(0,o.jsxs)("div",{className:"sliderLine",children:[this.props.icon&&(0,o.jsx)("img",{src:this.props.icon,title:this.props.iconLabel,alt:this.props.iconLabel,className:"icon"}),(!this.props.icon||""!=this.props.label)&&(0,o.jsx)("div",{className:this.props.margin?"label withMargins":"label",title:this.props.label,children:this.props.label}),(0,o.jsx)(Kn,{lockObject:this.props.lockObject,isInteger:0===this.props.decimalCount,smallUI:!0,label:"",target:this.state,digits:void 0===this.props.decimalCount?4:this.props.decimalCount,propertyName:"value",min:this.props.allowOverflow?void 0:this.props.minimum,max:this.props.allowOverflow?void 0:this.props.maximum,onEnter:()=>{const e=this.prepareDataToRead(this.state.value);this.onChange(e)},onChange:()=>{const e=this.prepareDataToRead(this.state.value);this.onChange(e)},onPropertyChangedObservable:this.props.onPropertyChangedObservable,unit:this.props.unit}),(0,o.jsx)("div",{className:"slider",children:(0,o.jsx)("input",{className:"range"+(this.props.allowOverflow&&(this.state.value>this.props.maximum||this.state.valuethis.onInput(e.target.value),onChange:e=>this.onChange(e.target.value)})}),(0,o.jsx)("div",{className:"copy hoverIcon",onClick:()=>this.onCopyClick(),title:"Copy to clipboard",children:(0,o.jsx)("img",{src:qr,alt:"Copy"})})]})}}const qn=Number.MAX_SAFE_INTEGER;class $n extends s.Component{_remapValueIn(e){return this.props.allowNullValue&&null===e?qn:e}_remapValueOut(e){return this.props.allowNullValue&&e===qn?null:e}_getValue(e){return e.extractValue?e.extractValue(e.target):e.target&&e.propertyName?e.target[e.propertyName]:e.options[e.defaultIfNull||0]}constructor(e){super(e),this._localChange=!1,this.state={value:this._remapValueIn(this._getValue(e))}}shouldComponentUpdate(e,t){if(this._localChange)return this._localChange=!1,!0;const s=this._remapValueIn(e.extractValue?e.extractValue(this.props.target):e.target[e.propertyName]);return null!=s&&s!==t.value&&(t.value=s,!0)}raiseOnPropertyChanged(e,t){this.props.onPropertyChangedObservable&&this.props.onPropertyChangedObservable.notifyObservers({object:this.props.target,property:this.props.propertyName,value:e,initialValue:t,allowNullValue:this.props.allowNullValue})}setValue(e){this.setState({value:e})}updateValue(e){const t=this.props.valuesAreStrings?e:parseInt(e);this._localChange=!0;const s=this.props.extractValue?this.props.extractValue(this.props.target):this.props.target[this.props.propertyName];this.props.noDirectUpdate||(this.props.target[this.props.propertyName]=this._remapValueOut(t)),this.setState({value:t}),this.props.onSelect&&this.props.onSelect(t);const r=this.props.extractValue?this.props.extractValue(this.props.target):this.props.target[this.props.propertyName];this.raiseOnPropertyChanged(r,s)}onCopyClick(){if(this.props&&this.props.target){const{className:e,babylonNamespace:t}=Qr(this.props.target);Jr("globalThis.debugNode."+this.props.propertyName+" = "+(this.props.extractValue?this.props.extractValue(this.props.target):this.props.target[this.props.propertyName])+";// (debugNode as "+t+e+")")}else Jr("undefined")}render(){return(0,o.jsxs)("div",{className:"listLine"+(this.props.className?" "+this.props.className:""),children:[this.props.icon&&(0,o.jsx)("img",{src:this.props.icon,title:this.props.iconLabel,alt:this.props.iconLabel,color:"black",className:"icon"}),(0,o.jsx)("div",{className:"label",title:this.props.label,children:this.props.label}),(0,o.jsx)("div",{className:"options",children:(0,o.jsx)("select",{onChange:e=>this.updateValue(e.target.value),value:this.state.value??"",children:this.props.options.map(((e,t)=>(0,o.jsx)("option",{selected:e.selected,value:e.value,title:e.label,children:e.label},e.label+t)))})}),(0,o.jsx)("div",{className:"copy hoverIcon",onClick:()=>this.onCopyClick(),title:"Copy to clipboard",children:(0,o.jsx)("img",{src:qr,alt:"Copy"})})]})}}class eo extends s.Component{constructor(e){super(e),this._localChange=!1,this.state={value:this.props.value.toFixed(void 0!==this.props.precision?this.props.precision:3)}}componentWillUnmount(){this.props.lockObject&&(this.props.lockObject.lock=!1)}shouldComponentUpdate(e,t){return this._localChange?(this._localChange=!1,!0):e.value.toString()!==t.value&&(t.value=e.value.toFixed(void 0!==this.props.precision?this.props.precision:3),!0)}updateValue(e){if(/[^0-9.-]/g.test(e))return;const t=parseFloat(e);this._localChange=!0,this.setState({value:e}),isNaN(t)||this.props.onChange(t)}onBlur(){this._localChange=!1;const e=parseFloat(this.state.value);this.props.lockObject&&(this.props.lockObject.lock=!1),isNaN(e)?this.props.onChange(this.props.value):this.props.onChange(e)}incrementValue(e){let t=parseFloat(this.state.value);isNaN(t)&&(t=0),this.updateValue((t+e).toFixed(void 0!==this.props.precision?this.props.precision:3))}onKeyDown(e){const t=this.props.step||1,s=s=>{e.shiftKey&&(s*=10,(e.ctrlKey||e.metaKey)&&(s*=10)),this.incrementValue(s*t),e.preventDefault()};"ArrowUp"===e.key?s(1):"ArrowDown"===e.key&&s(-1)}render(){return(0,o.jsxs)("div",{className:"numeric",children:[this.props.icon&&(0,o.jsx)("img",{src:this.props.icon,title:this.props.iconLabel,alt:this.props.iconLabel,className:"icon"}),this.props.label&&(0,o.jsx)("div",{className:"numeric-label",title:this.props.labelTooltip??this.props.label,children:`${this.props.label}: `}),(0,o.jsx)("input",{type:"number",step:this.props.step,className:"numeric-input",value:this.state.value,onChange:e=>this.updateValue(e.target.value),onKeyDown:e=>this.onKeyDown(e),onFocus:()=>{this.props.lockObject&&(this.props.lockObject.lock=!0)},onBlur:()=>this.onBlur()})]})}}eo.defaultProps={step:1};const to=new n.Color4(0,0,0,0);class so extends s.Component{constructor(e){super(e),this.state={isExpanded:!1,color:this.getValue()},this.props.target._isLinearColor=e.isLinear}shouldComponentUpdate(e,t){const s=t.color,r=this.getValue(e);return s!==this.state.color?(t.color=s,!0):r!==this.state.color?(t.color=r,!0):t.isExpanded!==this.state.isExpanded}getValue(e=this.props){const t=e.target[e.propertyName];return t?"string"==typeof t?t===Kr?to:this._convertToColor(t):e.isLinear?t.toGammaSpace():t.clone():to}setColorFromString(e){const t=this._convertToColor(e);this.setColor(t)}setColor(e){this.setState({color:e.clone()}),this.props.isLinear&&e.toLinearSpaceToRef(e);const t=this.props.disableAlpha?this._toColor3(e):e,s=this.props.target,r=s[this.props.propertyName],n="string"==typeof s[this.props.propertyName]?t.toHexString():t;s[this.props.propertyName]=n,this.props.onPropertyChangedObservable&&this.props.onPropertyChangedObservable.notifyObservers({object:s,property:this.props.propertyName,value:n,initialValue:r}),this.props.onChange&&this.props.onChange()}switchExpandState(){this.setState({isExpanded:!this.state.isExpanded})}updateStateR(e){this.setColor(new n.Color4(e,this.state.color.g,this.state.color.b,this.state.color.a))}updateStateG(e){this.setColor(new n.Color4(this.state.color.r,e,this.state.color.b,this.state.color.a))}updateStateB(e){this.setColor(new n.Color4(this.state.color.r,this.state.color.g,e,this.state.color.a))}updateStateA(e){this.props.disableAlpha||this.setColor(new n.Color4(this.state.color.r,this.state.color.g,this.state.color.b,e))}_convertToColor(e){if(""===e||"transparent"===e)return to;if("#"!==e.substring(0,1)||7!==e.length&&9!==e.length){const t=document.createElement("div");t.style.color=e,document.body.append(t);const s=window.getComputedStyle(t).color;document.body.removeChild(t);const r=s.substring(4,s.length-1).replace(/ /g,"").split(","),o=r.length>3?parseInt(r[3])/255:1;return new n.Color4(parseInt(r[0])/255,parseInt(r[1])/255,parseInt(r[2])/255,o)}if(this.props.disableAlpha){const t=n.Color3.FromHexString(e);return new n.Color4(t.r,t.g,t.b,1)}return n.Color4.FromHexString(e)}_toColor3(e){return new n.Color3(e.r,e.g,e.b)}onCopyClick(){if(this.props&&this.props.target){const{className:e,babylonNamespace:t}=Qr(this.props.target),s="globalThis.debugNode",r=this.props.propertyName,n=this.props.target[this.props.propertyName],o=this.state.color.toHexString();let a;a=n.a?"new "+t+"Color4("+n.r+", "+n.g+", "+n.b+", "+n.a+")":"new "+t+"Color3("+n.r+", "+n.g+", "+n.b+")",a+=";// (HEX : "+o,Jr(s+"."+r+" = "+a+" , debugNode as "+t+e+")")}else Jr("undefined")}render(){const e=this.state.isExpanded?(0,o.jsx)(js,{icon:sr}):(0,o.jsx)(js,{icon:dr});return(0,o.jsxs)("div",{className:"color3Line",children:[(0,o.jsxs)("div",{className:"firstLine",children:[this.props.icon&&(0,o.jsx)("img",{src:this.props.icon,title:this.props.iconLabel,alt:this.props.iconLabel,className:"icon"}),(0,o.jsx)("div",{className:"label",title:this.props.label,children:this.props.label}),(0,o.jsx)("div",{className:"color3",children:(0,o.jsx)(Vr,{lockObject:this.props.lockObject,linearHint:this.props.isLinear,value:this.props.disableAlpha?this._toColor3(this.state.color):this.state.color,onColorChanged:e=>{this.setColorFromString(e)}})}),(0,o.jsx)("div",{className:"expand hoverIcon",onClick:()=>this.switchExpandState(),title:"Expand",children:e}),(0,o.jsx)("div",{className:"copy hoverIcon",onClick:()=>this.onCopyClick(),title:"Copy to clipboard",children:(0,o.jsx)("img",{src:qr,alt:"Copy"})})]}),this.state.isExpanded&&(0,o.jsxs)("div",{className:"secondLine",children:[(0,o.jsx)(eo,{lockObject:this.props.lockObject,label:"r",labelTooltip:"Red",value:this.state.color.r,onChange:e=>this.updateStateR(e)}),(0,o.jsx)(eo,{lockObject:this.props.lockObject,label:"g",labelTooltip:"Green",value:this.state.color.g,onChange:e=>this.updateStateG(e)}),(0,o.jsx)(eo,{lockObject:this.props.lockObject,label:"b",labelTooltip:"Blue",value:this.state.color.b,onChange:e=>this.updateStateB(e)}),this.props.disableAlpha||(0,o.jsx)(eo,{lockObject:this.props.lockObject,label:"a",labelTooltip:"Alpha",value:this.state.color.a,onChange:e=>this.updateStateA(e)})]})]})}}class ro extends s.Component{render(){const e=this.props;return(0,o.jsx)(so,{disableAlpha:!0,...e})}}class no extends s.Component{constructor(e){super(e),this._localChange=!1;const t=this.props.target[this.props.propertyName];this.state={isExpanded:!1,value:t&&t.clone?t.clone():n.Vector2.Zero()}}shouldComponentUpdate(e,t){const s=e.target[e.propertyName];return!(s.equals(t.value)&&!this._localChange||(t.value=s.clone(),this._localChange=!1,0))}switchExpandState(){this._localChange=!0,this.setState({isExpanded:!this.state.isExpanded})}raiseOnPropertyChanged(e){this.props.onChange&&this.props.onChange(this.state.value),this.props.onPropertyChangedObservable&&this.props.onPropertyChangedObservable.notifyObservers({object:this.props.target,property:this.props.propertyName,value:this.state.value,initialValue:e})}updateStateX(e){this._localChange=!0;const t=this.state.value.clone();this.props.target[this.props.propertyName].x=e,this.state.value.x=e,this.setState({value:this.state.value}),this.raiseOnPropertyChanged(t)}updateStateY(e){this._localChange=!0;const t=this.state.value.clone();this.props.target[this.props.propertyName].y=e,this.state.value.y=e,this.setState({value:this.state.value}),this.raiseOnPropertyChanged(t)}render(){const e=this.state.isExpanded?(0,o.jsx)(js,{icon:sr}):(0,o.jsx)(js,{icon:dr});return(0,o.jsxs)("div",{className:"vector3Line",children:[this.props.icon&&(0,o.jsx)("img",{src:this.props.icon,title:this.props.iconLabel,alt:this.props.iconLabel,className:"icon"}),(0,o.jsxs)("div",{className:"firstLine",title:this.props.label,children:[(0,o.jsx)("div",{className:"label",children:this.props.label}),(0,o.jsx)("div",{className:"vector",children:`X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}`}),(0,o.jsx)("div",{className:"expand hoverIcon",onClick:()=>this.switchExpandState(),title:"Expand",children:e})]}),this.state.isExpanded&&(0,o.jsxs)("div",{className:"secondLine",children:[(0,o.jsx)(eo,{lockObject:this.props.lockObject,label:"x",step:this.props.step,value:this.state.value.x,onChange:e=>this.updateStateX(e)}),(0,o.jsx)(eo,{lockObject:this.props.lockObject,label:"y",step:this.props.step,value:this.state.value.y,onChange:e=>this.updateStateY(e)})]})]})}}no.defaultProps={step:.001};class oo extends s.Component{constructor(e){super(e),this._localChange=!1;const t=this.getCurrentValue();this.state={isExpanded:!1,value:t&&t.clone?t.clone():n.Vector3.Zero()}}getCurrentValue(){return this.props.target[this.props.propertyName]}shouldComponentUpdate(e,t){const s=e.target[e.propertyName];return!(s.equals(t.value)&&!this._localChange||(t.value=s.clone(),this._localChange=!1,0))}switchExpandState(){this._localChange=!0,this.setState({isExpanded:!this.state.isExpanded})}raiseOnPropertyChanged(e){this.props.onChange&&this.props.onChange(this.state.value),this.props.onPropertyChangedObservable&&this.props.onPropertyChangedObservable.notifyObservers({object:this.props.target,property:this.props.propertyName,value:this.state.value,initialValue:e})}updateVector3(){const e=this.props.target[this.props.propertyName].clone();this.props.target[this.props.propertyName]=this.state.value,this.setState({value:e}),this.raiseOnPropertyChanged(e)}updateStateX(e){this._localChange=!0,this.state.value.x=e,this.updateVector3()}updateStateY(e){this._localChange=!0,this.state.value.y=e,this.updateVector3()}updateStateZ(e){this._localChange=!0,this.state.value.z=e,this.updateVector3()}onCopyClick(){if(this.props&&this.props.target){const{className:e,babylonNamespace:t}=Qr(this.props.target),s="globalThis.debugNode",r=this.props.propertyName,n=this.props.target[this.props.propertyName];Jr(s+"."+r+" = new "+t+"Vector3("+n.x+", "+n.y+", "+n.z+");// (debugNode as "+t+e+")")}else Jr("undefined")}render(){const e=this.state.isExpanded?(0,o.jsx)(js,{icon:sr}):(0,o.jsx)(js,{icon:dr});return(0,o.jsxs)("div",{className:"vector3Line",children:[(0,o.jsxs)("div",{className:"firstLine",children:[this.props.icon&&(0,o.jsx)("img",{src:this.props.icon,title:this.props.iconLabel,alt:this.props.iconLabel,className:"icon"}),(0,o.jsx)("div",{className:"label",title:this.props.label,children:this.props.label}),(0,o.jsxs)("div",{className:"vector",children:[!this.props.useEuler&&`X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}, Z: ${this.state.value.z.toFixed(2)}`,this.props.useEuler&&`X: ${n.Tools.ToDegrees(this.state.value.x).toFixed(2)}, Y: ${n.Tools.ToDegrees(this.state.value.y).toFixed(2)}, Z: ${n.Tools.ToDegrees(this.state.value.z).toFixed(2)}`]}),(0,o.jsx)("div",{className:"expand hoverIcon",onClick:()=>this.switchExpandState(),title:"Expand",children:e}),(0,o.jsx)("div",{className:"copy hoverIcon",onClick:()=>this.onCopyClick(),title:"Copy to clipboard",children:(0,o.jsx)("img",{src:qr,alt:"Copy"})})]}),this.state.isExpanded&&!this.props.useEuler&&(0,o.jsxs)("div",{className:"secondLine",children:[(0,o.jsx)(eo,{label:"x",lockObject:this.props.lockObject,step:this.props.step,value:this.state.value.x,onChange:e=>this.updateStateX(e)}),(0,o.jsx)(eo,{label:"y",lockObject:this.props.lockObject,step:this.props.step,value:this.state.value.y,onChange:e=>this.updateStateY(e)}),(0,o.jsx)(eo,{label:"z",lockObject:this.props.lockObject,step:this.props.step,value:this.state.value.z,onChange:e=>this.updateStateZ(e)})]}),this.state.isExpanded&&this.props.useEuler&&!this.props.noSlider&&(0,o.jsxs)("div",{className:"secondLine",children:[(0,o.jsx)(Xn,{lockObject:this.props.lockObject,margin:!0,label:"x",minimum:0,maximum:360,step:.1,directValue:n.Tools.ToDegrees(this.state.value.x),onChange:e=>this.updateStateX(n.Tools.ToRadians(e))}),(0,o.jsx)(Xn,{lockObject:this.props.lockObject,margin:!0,label:"y",minimum:0,maximum:360,step:.1,directValue:n.Tools.ToDegrees(this.state.value.y),onChange:e=>this.updateStateY(n.Tools.ToRadians(e))}),(0,o.jsx)(Xn,{lockObject:this.props.lockObject,margin:!0,label:"z",minimum:0,maximum:360,step:.1,directValue:n.Tools.ToDegrees(this.state.value.z),onChange:e=>this.updateStateZ(n.Tools.ToRadians(e))})]}),this.state.isExpanded&&this.props.useEuler&&this.props.noSlider&&(0,o.jsxs)("div",{className:"secondLine",children:[(0,o.jsx)(eo,{lockObject:this.props.lockObject,label:"x",step:this.props.step,value:n.Tools.ToDegrees(this.state.value.x),onChange:e=>this.updateStateX(n.Tools.ToRadians(e))}),(0,o.jsx)(eo,{lockObject:this.props.lockObject,label:"y",step:this.props.step,value:n.Tools.ToDegrees(this.state.value.y),onChange:e=>this.updateStateY(n.Tools.ToRadians(e))}),(0,o.jsx)(eo,{lockObject:this.props.lockObject,label:"z",step:this.props.step,value:n.Tools.ToDegrees(this.state.value.z),onChange:e=>this.updateStateZ(n.Tools.ToRadians(e))})]})]})}}oo.defaultProps={step:.001};class ao extends s.Component{constructor(e){super(e),this._localChange=!1;const t=this.props.target[this.props.propertyName].clone();this.state={isExpanded:!1,value:t,eulerValue:t.toEulerAngles()}}_checkRoundCircle(e,t){return Math.abs(n.Tools.ToDegrees(e))+Math.abs(n.Tools.ToDegrees(t))===360}shouldComponentUpdate(e,t){const s=e.target[e.propertyName];return!(s.equals(t.value)&&!this._localChange||(t.value=s.clone(),t.eulerValue=s.toEulerAngles(),this._checkRoundCircle(t.eulerValue.x,this.state.eulerValue.x)&&(t.eulerValue.x=this.state.eulerValue.x),this._checkRoundCircle(t.eulerValue.y,this.state.eulerValue.y)&&(t.eulerValue.y=this.state.eulerValue.y),this._checkRoundCircle(t.eulerValue.z,this.state.eulerValue.z)&&(t.eulerValue.z=this.state.eulerValue.z),this._localChange=!1,0))}switchExpandState(){this._localChange=!0,this.setState({isExpanded:!this.state.isExpanded})}raiseOnPropertyChanged(e,t){this.props.onPropertyChangedObservable&&this.props.onPropertyChangedObservable.notifyObservers({object:this.props.target,property:this.props.propertyName,value:e,initialValue:t})}updateQuaternion(){const e=this.props.target[this.props.propertyName].clone();this.props.target[this.props.propertyName]=this.state.value,this.setState({value:e}),this.raiseOnPropertyChanged(this.state.value,e)}updateStateX(e){this._localChange=!0,this.state.value.x=e,this.updateQuaternion()}updateStateY(e){this._localChange=!0,this.state.value.y=e,this.updateQuaternion()}updateStateZ(e){this._localChange=!0,this.state.value.z=e,this.updateQuaternion()}updateStateW(e){this._localChange=!0,this.state.value.w=e,this.updateQuaternion()}updateQuaternionFromEuler(){const e=this.state.eulerValue.toQuaternion();this.state.value.x=e.x,this.state.value.y=e.y,this.state.value.z=e.z,this.state.value.w=e.w,this.updateQuaternion()}updateStateEulerX(e){this._localChange=!0,this.state.eulerValue.x=n.Tools.ToRadians(e),this.updateQuaternionFromEuler()}updateStateEulerY(e){this._localChange=!0,this.state.eulerValue.y=n.Tools.ToRadians(e),this.updateQuaternionFromEuler()}updateStateEulerZ(e){this._localChange=!0,this.state.eulerValue.z=n.Tools.ToRadians(e),this.updateQuaternionFromEuler()}onCopyClick(){if(this.props&&this.props.target){const{className:e,babylonNamespace:t}=Qr(this.props.target),s="globalThis.debugNode",r=this.props.propertyName,n=this.props.target[this.props.propertyName];Jr(s+"."+r+" = new "+t+"Quaternion("+n.x+", "+n.y+", "+n.z+", "+n.w+");// (debugNode as "+t+e+")")}else Jr("undefined")}render(){const e=this.state.isExpanded?(0,o.jsx)(js,{icon:sr}):(0,o.jsx)(js,{icon:dr}),t=this.state.value,s=this.state.eulerValue.clone();return s.x=n.Tools.ToDegrees(s.x),s.y=n.Tools.ToDegrees(s.y),s.z=n.Tools.ToDegrees(s.z),(0,o.jsxs)("div",{className:"vector3Line",children:[(0,o.jsxs)("div",{className:"firstLine",title:this.props.label+" (Using Quaternion)",children:[(0,o.jsx)("div",{className:"label",children:this.props.label+" (Using Quaternion)"}),(0,o.jsxs)("div",{className:"vector",children:[!this.props.useEuler&&`X: ${t.x.toFixed(1)}, Y: ${t.y.toFixed(1)}, Z: ${t.z.toFixed(1)}, W: ${t.w.toFixed(1)}`,this.props.useEuler&&`X: ${s.x.toFixed(2)}, Y: ${s.y.toFixed(2)}, Z: ${s.z.toFixed(2)}`]}),(0,o.jsx)("div",{className:"expand hoverIcon",onClick:()=>this.switchExpandState(),title:"Expand",children:e}),(0,o.jsx)("div",{className:"copy hoverIcon",onClick:()=>this.onCopyClick(),title:"Copy to clipboard",children:(0,o.jsx)("img",{src:qr,alt:"Copy"})})]}),this.state.isExpanded&&!this.props.useEuler&&(0,o.jsxs)("div",{className:"secondLine",children:[(0,o.jsx)(eo,{lockObject:this.props.lockObject,label:"x",value:t.x,onChange:e=>this.updateStateX(e)}),(0,o.jsx)(eo,{lockObject:this.props.lockObject,label:"y",value:t.y,onChange:e=>this.updateStateY(e)}),(0,o.jsx)(eo,{lockObject:this.props.lockObject,label:"z",value:t.z,onChange:e=>this.updateStateZ(e)}),(0,o.jsx)(eo,{lockObject:this.props.lockObject,label:"w",value:t.w,onChange:e=>this.updateStateW(e)})]}),this.state.isExpanded&&this.props.useEuler&&(0,o.jsxs)("div",{className:"secondLine",children:[(0,o.jsx)(Kn,{lockObject:this.props.lockObject,label:"x",target:s,propertyName:"x",onChange:e=>{this.updateStateEulerX(e)}}),(0,o.jsx)(Kn,{lockObject:this.props.lockObject,label:"y",target:s,propertyName:"y",onChange:e=>{this.updateStateEulerY(e)}}),(0,o.jsx)(Kn,{lockObject:this.props.lockObject,label:"z",target:s,propertyName:"z",onChange:e=>{this.updateStateEulerZ(e)}})]})]})}}let io=-1;class lo extends s.Component{constructor(e){super(e),this._localChange=!1;const t=this.props.numeric?"0":"";this.state={value:(void 0!==this.props.value?this.props.value:this.props.target[this.props.propertyName])||t,dragging:!1}}componentWillUnmount(){this.props.lockObject&&(this.props.lockObject.lock=!1)}shouldComponentUpdate(e,t){if(this._localChange)return this._localChange=!1,!0;const s=void 0!==e.value?e.value:e.target[e.propertyName];return s!==t.value?(t.value=s||"",!0):t.dragging!=this.state.dragging||e.unit!==this.props.unit}raiseOnPropertyChanged(e,t){this.props.onChange?this.props.onChange(e):this.props.onPropertyChangedObservable&&this.props.onPropertyChangedObservable.notifyObservers({object:this.props.target,property:this.props.propertyName,value:e,initialValue:t})}getCurrentNumericValue(e){const t=parseFloat(e);if(!isNaN(t))return t;if(void 0!==this.props.placeholder){const e=parseFloat(this.props.placeholder);if(!isNaN(e))return e}return 0}updateValue(e,t){if(this.props.disabled)return;if(this.props.numbersOnly){if(/[^0-9.px%-]/g.test(e))return;e||(e="0"),0===e.search(/0+[0-9-]/g)&&(e=e.substring(1))}if(this.props.numeric){let t=this.getCurrentNumericValue(e);this.props.roundValues&&(t=Math.round(t)),void 0!==this.props.min&&(t=Math.max(this.props.min,t)),void 0!==this.props.max&&(t=Math.min(this.props.max,t)),e=t.toString()}this._localChange=!0;const s=void 0!==this.props.value?this.props.value:this.props.target[this.props.propertyName];this.props.validator&&t&&0==this.props.validator(t)&&(e=s),this.setState({value:e}),this.props.propertyName&&!this.props.delayInput&&(this.props.target[this.props.propertyName]=e),this.props.throttlePropertyChangedNotification?(io>=0&&window.clearTimeout(io),io=window.setTimeout((()=>{this.raiseOnPropertyChanged(e,s)}),this.props.throttlePropertyChangedNotificationDelay??200)):this.raiseOnPropertyChanged(e,s)}incrementValue(e){if(this.props.step&&(e*=this.props.step),this.props.arrowsIncrement)return void this.props.arrowsIncrement(e);const t=this.getCurrentNumericValue(this.state.value);this.updateValue((t+e).toFixed(2))}onKeyDown(e){!this.props.disabled&&this.props.arrows&&("ArrowUp"===e.key&&(this.incrementValue(1),e.preventDefault()),"ArrowDown"===e.key&&(this.incrementValue(-1),e.preventDefault()))}render(){const e=this.state.value===Kr?"":this.state.value,t=this.state.value===Kr?Kr:this.props.placeholder||"",s=this.props.step||(this.props.roundValues?1:.01),r=this.props.multilines?"textInputArea":void 0!==this.props.unit?"textInputLine withUnits":"textInputLine";return(0,o.jsxs)("div",{className:r,children:[this.props.icon&&(0,o.jsx)("img",{src:this.props.icon,title:this.props.iconLabel,alt:this.props.iconLabel,color:"black",className:"icon"}),void 0!==this.props.label&&(0,o.jsx)("div",{className:"label",title:this.props.label,children:this.props.label}),this.props.multilines&&(0,o.jsx)(o.Fragment,{children:(0,o.jsx)("textarea",{className:this.props.disabled?"disabled":"",value:this.state.value,onFocus:()=>{this.props.lockObject&&(this.props.lockObject.lock=!0)},onChange:e=>this.updateValue(e.target.value),onKeyDown:e=>{13===e.keyCode&&this.updateValue(this.state.value)},onBlur:e=>{this.updateValue(e.target.value,e.target.value),this.props.lockObject&&(this.props.lockObject.lock=!1)},disabled:this.props.disabled})}),!this.props.multilines&&(0,o.jsxs)("div",{className:`value${!0===this.props.noUnderline?" noUnderline":""}${this.props.arrows?" hasArrows":""}${this.state.dragging?" dragging":""}`,children:[(0,o.jsx)("input",{className:this.props.disabled?"disabled":"",value:e,onBlur:e=>{this.props.lockObject&&(this.props.lockObject.lock=!1),this.updateValue((void 0!==this.props.value?this.props.value:this.props.target[this.props.propertyName])||"",e.target.value)},onFocus:()=>{this.props.lockObject&&(this.props.lockObject.lock=!0)},onChange:e=>this.updateValue(e.target.value),onKeyDown:e=>this.onKeyDown(e),placeholder:t,type:this.props.numeric?"number":"text",step:s,disabled:this.props.disabled}),this.props.arrows&&(0,o.jsx)(Qn,{incrementValue:e=>this.incrementValue(e),setDragging:e=>this.setState({dragging:e})})]}),this.props.unit]})}}class po extends s.Component{constructor(e){super(e),this.state={mode:0}}renderInspectable(e){switch(e.type){case 0:return(0,o.jsx)(en,{label:e.label,target:this.props.target,propertyName:e.propertyName,onPropertyChangedObservable:this.props.onPropertyChangedObservable},e.label);case 1:return(0,o.jsx)(Xn,{lockObject:this.props.lockObject,label:e.label,target:this.props.target,propertyName:e.propertyName,step:void 0!==e.step?e.step:.1,minimum:void 0!==e.min?e.min:0,maximum:void 0!==e.max?e.max:1,onPropertyChangedObservable:this.props.onPropertyChangedObservable},e.label);case 10:return(0,o.jsx)(no,{lockObject:this.props.lockObject,label:e.label,target:this.props.target,propertyName:e.propertyName,onPropertyChangedObservable:this.props.onPropertyChangedObservable},e.label);case 2:return(0,o.jsx)(oo,{lockObject:this.props.lockObject,label:e.label,target:this.props.target,propertyName:e.propertyName,onPropertyChangedObservable:this.props.onPropertyChangedObservable},e.label);case 3:return(0,o.jsx)(ao,{lockObject:this.props.lockObject,useEuler:this.props.globalState.onlyUseEulers,label:e.label,target:this.props.target,propertyName:e.propertyName,onPropertyChangedObservable:this.props.onPropertyChangedObservable},e.label);case 4:return(0,o.jsx)(ro,{lockObject:this.props.lockObject,label:e.label,target:this.props.target,propertyName:e.propertyName,onPropertyChangedObservable:this.props.onPropertyChangedObservable},e.label);case 5:return(0,o.jsx)(lo,{label:e.label,lockObject:this.props.lockObject,target:this.props.target,propertyName:e.propertyName,onPropertyChangedObservable:this.props.onPropertyChangedObservable},e.label);case 6:return(0,o.jsx)(Mr,{label:e.label,onClick:e.callback||function(){n.Logger.Warn("no call back function added")}},e.label);case 7:return(0,o.jsx)($n,{label:e.label,target:this.props.target,propertyName:e.propertyName,options:e.options||[],onSelect:e.callback||function(e){n.Logger.Warn(`Option ${e} is selected`)}},e.label);case 8:return(0,o.jsx)(yr,{label:e.label,value:" "},e.label);case 9:return(0,o.jsx)(wr,{label:e.label,onClick:e.fileCallback||function(){n.Logger.Warn("no file call back function added")},accept:e.accept||"*"},e.label)}return null}render(){const e=this.props.target.inspectableCustomProperties;return e&&0!==e.length?(0,o.jsx)(Or,{title:"CUSTOM",selection:this.props.globalState,children:e.map((e=>this.renderInspectable(e)))}):null}}class co extends s.Component{constructor(e){super(e),this.onBeforeUnloadListener=()=>{this._window&&this._window.close()},this._container=document.createElement("div"),this._container.id=this.props.id,this._window,this.state={isComponentMounted:!1,blockedByBrowser:!1}}componentDidMount(){this.openPopup(),this.setState({isComponentMounted:!0})}openPopup(){const{title:e,size:t,onClose:s,onOpen:r}=this.props,o=`window_${e}`;this._container=Lp._CreatePopup(e,o,t.width,t.height,!0),this._container&&(this._host=this._container.ownerDocument.createElement("div"),this._host.id="host",this._host.style.width="auto",this._container.appendChild(this._host)),this._window=Lp[o],window.addEventListener("beforeunload",this.onBeforeUnloadListener),this._window?(r&&r(this._window),this._window.addEventListener("keyup",(e=>{this.props.onKeyUp&&this.props.onKeyUp(e)})),this._window.addEventListener("keydown",(e=>{this.props.onKeyDown&&this.props.onKeyDown(e)})),this._window.addEventListener("beforeunload",(()=>this._window&&s(this._window))),this._window.addEventListener("resize",(()=>{this.props.onResize&&this._window&&this.props.onResize(this._window)}))):this._window||this.setState({blockedByBrowser:!0},(()=>{this.state.blockedByBrowser&&n.Logger.Warn("Popup window couldn't be created")}))}componentWillUnmount(){window.removeEventListener("beforeunload",this.onBeforeUnloadListener),this._window&&this._window.close()}getWindow(){return this._window}render(){return this.state.isComponentMounted&&null!==this._container?r.createPortal(this.props.children,this._host):null}}class ho extends s.Component{constructor(e){super(e),this.state={value:this.props.value,isFocused:!1}}_onChange(e){if(this.props.isNumber){const t=parseFloat(e);if(isNaN(t)){if("-"!==e&&""!==e)return}else this.props.onValueAsNumberChanged&&this.props.onValueAsNumberChanged(t,!0),this._lastKnownGoodValue=t.toString()}this._lastKnownGoodValue=e,this.setState({value:e})}_onBlur(){if(this.props.context.focusedInput=!1,this.props.isNumber){const e=parseFloat(this.state.value);isNaN(e)?this.setState({value:this._lastKnownGoodValue,isFocused:!1}):(this.props.onValueAsNumberChanged&&this.props.onValueAsNumberChanged(e,!1),this.setState({value:e.toString(),isFocused:!1}))}else this.setState({isFocused:!1})}_onFocus(){this.props.context.focusedInput=!0,this.setState({isFocused:!0})}shouldComponentUpdate(e,t){return e!==this.props&&(t.value=e.value),!0}_onKeyPress(e){if("Enter"===e.key){const e=parseFloat(this.state.value);isNaN(e)||this.props.onValueAsNumberChanged&&this.props.onValueAsNumberChanged(e,!1)}}render(){return(0,o.jsx)("input",{type:"text",title:this.props.tooltip,onFocus:()=>this._onFocus(),onBlur:()=>this._onBlur(),className:"text-input"+(this.props.className?" "+this.props.className:""),onChange:e=>this._onChange(this.props.complement?e.target.value.replace(this.props.complement,""):e.target.value),onKeyPress:e=>this._onKeyPress(e),value:(this.state.value||"")+(!this.state.isFocused&&this.props.complement?this.props.complement:""),id:this.props.id,disabled:this.props.disabled})}}class uo extends s.Component{constructor(e){super(e),this.state={}}render(){return(0,o.jsxs)("div",{title:this.props.tooltip,className:"control-button"+(this.props.className?" "+this.props.className:""),id:this.props.id,onClick:()=>this.props.onClick(),children:[(0,o.jsx)("img",{className:"control-button-image",src:this.props.icon}),(0,o.jsx)("img",{className:"control-button-hover-image",src:this.props.hoverIcon})]})}}const bo="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMTcuMzcsMTYuNDNhLjIuMiwwLDAsMSwuMi4yaDBWMjguMzdhLjIuMiwwLDAsMS0uMi4ySDUuNjNhLjIuMiwwLDAsMS0uMi0uMmgwVjE2LjYzYS4yLjIsMCwwLDEsLjItLjJIMTcuMzdaTTUuNjMsMTUuMjFhMS40NCwxLjQ0LDAsMCwwLTEuNDIsMS40MlYyOC4zN2ExLjQ0LDEuNDQsMCwwLDAsMS40MiwxLjQySDE3LjM3YTEuNDQsMS40NCwwLDAsMCwxLjQyLTEuNDJWMTYuNjNhMS40NCwxLjQ0LDAsMCwwLTEuNDItMS40MloiIHN0eWxlPSJmaWxsOiM4YzJmMmYiLz48L3N2Zz4=",Ao="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNNS42MywxNS4yMWExLjQ0LDEuNDQsMCwwLDAtMS40MiwxLjQyVjI4LjM3YTEuNDQsMS40NCwwLDAsMCwxLjQyLDEuNDJIMTcuMzdhMS40NCwxLjQ0LDAsMCwwLDEuNDItMS40MlYxNi42M2ExLjQ0LDEuNDQsMCwwLDAtMS40Mi0xLjQyWiIgc3R5bGU9ImZpbGw6I2MxMmQyZCIvPjwvc3ZnPg==";class mo extends s.Component{constructor(e){super(e),this._isMounted=!1,this.state={},this.props.context.onAnimationStateChanged.add((()=>{this._isMounted&&this.forceUpdate()}))}componentDidMount(){this._isMounted=!0}componentWillUnmount(){this._isMounted=!1}_onFirstKey(){this.props.context.onMoveToFrameRequired.notifyObservers(this.props.context.fromKey)}_onPrevKey(){const e=this.props.context.getPrevKey();null!==e&&this.props.context.onMoveToFrameRequired.notifyObservers(e)}_onRewind(){this.props.context.play(!1),this.forceUpdate()}_onForward(){this.props.context.play(!0),this.forceUpdate()}_onPrevFrame(){this.props.context.onMoveToFrameRequired.notifyObservers(Math.max(0,this.props.context.activeFrame-1))}_onNextFrame(){this.props.context.onMoveToFrameRequired.notifyObservers(this.props.context.activeFrame+1)}_onNextKey(){const e=this.props.context.getNextKey();null!==e&&this.props.context.onMoveToFrameRequired.notifyObservers(e)}_onEndKey(){this.props.context.onMoveToFrameRequired.notifyObservers(this.props.context.toKey)}_onStop(){this.props.context.stop(),this.forceUpdate()}render(){return(0,o.jsxs)("div",{id:"media-player",children:[(0,o.jsx)(uo,{tooltip:"Rewind to the first frame of the selected timeline",id:"start-key",context:this.props.context,globalState:this.props.globalState,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMTIuMzIsMTYuNzl2NC4xNGw1Ljk0LTQuNjJhLjYxLjYxLDAsMCwxLC44Ni4wOC42My42MywwLDAsMSwuMTQuNFYyOC4yMWEuNjEuNjEsMCwwLDEtLjYuNjIuNjMuNjMsMCwwLDEtLjQtLjE0bC01Ljk0LTQuNjJ2NC4xNGEuNjEuNjEsMCwwLDEtLjYuNjIuNjMuNjMsMCwwLDEtLjQtLjE0TDQsMjNhLjYxLjYxLDAsMCwxLS4xNS0uODVBLjU0LjU0LDAsMCwxLDQsMjJsNy4zNS01LjcxYS42MS42MSwwLDAsMSwuODUuMTNBLjYzLjYzLDAsMCwxLDEyLjMyLDE2Ljc5Wm0tNyw1LjcxTDExLjA5LDI3VjE4Wm03LDBoMEwxOCwyN1YxOFoiIHN0eWxlPSJmaWxsOiM4ODgiLz48L3N2Zz4=",hoverIcon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMTEuMzMsMTYuMzEsNCwyMmEuNjEuNjEsMCwwLDAtLjE1Ljg1QS41NC41NCwwLDAsMCw0LDIzbDcuMzUsNS43MWEuNjEuNjEsMCwwLDAsLjg2LS4wOC42My42MywwLDAsMCwuMTQtLjRWMjQuMDdsNS45NCw0LjYyYS42MS42MSwwLDAsMCwuODYtLjA4LjYzLjYzLDAsMCwwLC4xNC0uNFYxNi43OWEuNjEuNjEsMCwwLDAtLjYtLjYyLjYzLjYzLDAsMCwwLS40LjE0bC01Ljk0LDQuNjJWMTYuNzlhLjYxLjYxLDAsMCwwLTEtLjQ4WiIgc3R5bGU9ImZpbGw6I2NjYyIvPjwvc3ZnPg==",onClick:()=>this._onFirstKey()}),(0,o.jsx)(uo,{tooltip:"Rewind to the previous frame",id:"prev-frame",context:this.props.context,globalState:this.props.globalState,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cGF0aCBkPSJNOC4wNywyMS43MmExLjQyLDEuNDIsMCwwLDAtLjMyLDIsMS40NCwxLjQ0LDAsMCwwLC4zOC4zNmw4LjQ3LDUuNDNhMS40MiwxLjQyLDAsMCwwLDItLjQ0LDEuNCwxLjQsMCwwLDAsLjIyLS43NVYxNi44YTEuNDMsMS40MywwLDAsMC0xLjQzLTEuNDEsMS4zOSwxLjM5LDAsMCwwLS44MS4yNlptOS40OSw2LjU4YS4yLjIsMCwwLDEtLjMxLjE3TDguNzksMjNhLjIyLjIyLDAsMCwxLDAtLjI5bDAtLjA1LDguNDYtNi4wN2EuMi4yLDAsMCwxLC4yOCwwLC4yLjIsMCwwLDEsMCwuMTNabS0xMy4zNC44N2EuNjEuNjEsMCwwLDAsMS4yMiwwVjE1LjgzYS42MS42MSwwLDAsMC0xLjIyLDBoMFoiIHN0eWxlPSJmaWxsOiM4ODgiLz48L3N2Zz4=",hoverIcon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMTguNzgsMjguM2ExLjQzLDEuNDMsMCwwLDEtMS40MywxLjQxLDEuNCwxLjQsMCwwLDEtLjc1LS4yMkw4LjEzLDI0LjA2YTEuNDIsMS40MiwwLDAsMS0uNDItMiwxLjQ1LDEuNDUsMCwwLDEsLjM2LS4zOGw4LjQ3LTYuMDdhMS40MiwxLjQyLDAsMCwxLDIsLjM0LDEuMzksMS4zOSwwLDAsMSwuMjYuODFaIiBzdHlsZT0iZmlsbDojY2NjIi8+PHBhdGggZD0iTTQuMjIsMjkuMTdhLjYxLjYxLDAsMCwwLDEuMjIsMFYxNS44M2EuNjEuNjEsMCwwLDAtMS4yMiwwaDBaIiBzdHlsZT0iZmlsbDojY2NjIi8+PC9zdmc+",onClick:()=>this._onPrevFrame()}),(0,o.jsx)(uo,{tooltip:"Rewind to the previous key frame",id:"first-key",context:this.props.context,globalState:this.props.globalState,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNOC4wNywyMS43MmExLjQyLDEuNDIsMCwwLDAtLjMyLDIsMS40NCwxLjQ0LDAsMCwwLC4zOC4zNmw4LjQ3LDUuNDNhMS40MiwxLjQyLDAsMCwwLDItLjQ0LDEuNCwxLjQsMCwwLDAsLjIyLS43NVYxNi44YTEuNDMsMS40MywwLDAsMC0xLjQzLTEuNDEsMS4zOSwxLjM5LDAsMCwwLS44MS4yNlptOS40OSw2LjU4YS4yLjIsMCwwLDEtLjMxLjE3TDguNzksMjNhLjIyLjIyLDAsMCwxLDAtLjI5bDAtLjA1LDguNDYtNi4wN2EuMi4yLDAsMCwxLC4yOCwwLC4yLjIsMCwwLDEsMCwuMTNaIiBzdHlsZT0iZmlsbDojODg4Ii8+PHBhdGggZD0iTTQuMjIsMjkuMTdhLjYxLjYxLDAsMCwwLDEuMjIsMFYxNS44M2EuNjEuNjEsMCwwLDAtMS4yMiwwaDBaIiBzdHlsZT0iZmlsbDojZmZjMDE3Ii8+PHBhdGggZD0iTTMuNDgsMjUuOTFhMS4zNSwxLjM1LDAsMSwwLDIuNywwVjE5LjA5YTEuMzUsMS4zNSwwLDEsMC0yLjcsMGgwWiIgc3R5bGU9ImZpbGw6I2ZmYzAxNyIvPjwvc3ZnPg==",hoverIcon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMTguNzgsMjguM2ExLjQzLDEuNDMsMCwwLDEtMS40MywxLjQxLDEuNCwxLjQsMCwwLDEtLjc1LS4yMkw4LjEzLDI0LjA2YTEuNDIsMS40MiwwLDAsMS0uNDItMiwxLjQ1LDEuNDUsMCwwLDEsLjM2LS4zOGw4LjQ3LTYuMDdhMS40MiwxLjQyLDAsMCwxLDIsLjM0LDEuMzksMS4zOSwwLDAsMSwuMjYuODFaIiBzdHlsZT0iZmlsbDojY2NjIi8+PHBhdGggZD0iTTQuMjIsMjkuMTdhLjYxLjYxLDAsMCwwLDEuMjIsMFYxNS44M2EuNjEuNjEsMCwwLDAtMS4yMiwwaDBaIiBzdHlsZT0iZmlsbDojZmZjMDE3Ii8+PHBhdGggZD0iTTMuNDgsMjUuOTFhMS4zNSwxLjM1LDAsMSwwLDIuNywwVjE5LjA5YTEuMzUsMS4zNSwwLDEsMC0yLjcsMGgwWiIgc3R5bGU9ImZpbGw6I2ZmYzAxNyIvPjwvc3ZnPg==",onClick:()=>this._onPrevKey()}),(this.props.context.isPlaying&&this.props.context.forwardAnimation||!this.props.context.isPlaying)&&(0,o.jsx)(uo,{tooltip:"Play backwards",id:"rev-key",context:this.props.context,globalState:this.props.globalState,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNNi4yOCwyMmEuNi42LDAsMCwwLDAsMS4wNmw5Ljg3LDUuMzZhLjU5LjU5LDAsMCwwLC44LS4yMi42NC42NCwwLDAsMCwuMDgtLjNWMTcuMTNhLjYuNiwwLDAsMC0uNTgtLjYuNjEuNjEsMCwwLDAtLjMuMDhabTEyLDUuOWExLjc5LDEuNzksMCwwLDEtMS44MSwxLjc5LDEuNzcsMS43NywwLDAsMS0uODQtLjIxbC05LjkyLTUuNEExLjgxLDEuODEsMCwwLDEsNSwyMS42NGExLjg1LDEuODUsMCwwLDEsLjcyLS43Mmw5Ljg3LTUuMzdhMS44LDEuOCwwLDAsMSwyLjQ0Ljc0LDEuNzcsMS43NywwLDAsMSwuMjEuODRaIiBzdHlsZT0iZmlsbDojODg4Ii8+PC9zdmc+",hoverIcon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMTguMjMsMjcuODdhMS43OSwxLjc5LDAsMCwxLTEuODEsMS43OSwxLjc3LDEuNzcsMCwwLDEtLjg0LS4yMUw1LjcxLDI0LjA4QTEuODEsMS44MSwwLDAsMSw1LDIxLjY0YTEuODUsMS44NSwwLDAsMSwuNzItLjcybDkuODctNS4zN2ExLjgsMS44LDAsMCwxLDIuNDQuNzQsMS43NywxLjc3LDAsMCwxLC4yMS44NFoiIHN0eWxlPSJmaWxsOiNjY2MiLz48L3N2Zz4=",onClick:()=>this._onRewind()}),this.props.context.isPlaying&&!this.props.context.forwardAnimation&&(0,o.jsx)(uo,{tooltip:"Stop",id:"stop-key",context:this.props.context,globalState:this.props.globalState,icon:bo,hoverIcon:Ao,onClick:()=>this._onStop()}),(this.props.context.isPlaying&&!this.props.context.forwardAnimation||!this.props.context.isPlaying)&&(0,o.jsx)(uo,{tooltip:"Play forwards",id:"fwd-key",context:this.props.context,globalState:this.props.globalState,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNNi44NSwxNi42MWEuNTkuNTksMCwwLDAtLjguMjIuNjQuNjQsMCwwLDAtLjA4LjNWMjcuODdhLjYuNiwwLDAsMCwuNTguNi42MS42MSwwLDAsMCwuMy0uMDhMMTYuNzIsMjNhLjYuNiwwLDAsMCwwLTEuMDZabS0yLjA4LjUyYTEuNzksMS43OSwwLDAsMSwxLjgxLTEuNzksMS43NywxLjc3LDAsMCwxLC44NC4yMWw5Ljg3LDUuMzdBMS44MSwxLjgxLDAsMCwxLDE4LDIzLjM2YTEuODUsMS44NSwwLDAsMS0uNzIuNzJMNy40MiwyOS40NUExLjgsMS44LDAsMCwxLDUsMjguNzFhMS43NywxLjc3LDAsMCwxLS4yMS0uODRaIiBzdHlsZT0iZmlsbDojODg4Ii8+PC9zdmc+",hoverIcon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNNC43NywxNy4xM2ExLjc5LDEuNzksMCwwLDEsMS44MS0xLjc5LDEuNzcsMS43NywwLDAsMSwuODQuMjFsOS44Nyw1LjM3QTEuODEsMS44MSwwLDAsMSwxOCwyMy4zNmExLjg1LDEuODUsMCwwLDEtLjcyLjcyTDcuNDIsMjkuNDVBMS44LDEuOCwwLDAsMSw1LDI4LjcxYTEuNzcsMS43NywwLDAsMS0uMjEtLjg0WiIgc3R5bGU9ImZpbGw6I2NjYyIvPjwvc3ZnPg==",onClick:()=>this._onForward()}),this.props.context.isPlaying&&this.props.context.forwardAnimation&&(0,o.jsx)(uo,{tooltip:"Stop",id:"stop-key",context:this.props.context,globalState:this.props.globalState,icon:bo,hoverIcon:Ao,onClick:()=>this._onStop()}),(0,o.jsx)(uo,{tooltip:"Advance to the next key frame",id:"next-key",context:this.props.context,globalState:this.props.globalState,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNNi40NiwxNS42NWExLjQyLDEuNDIsMCwwLDAtMiwuMzQsMS4zOSwxLjM5LDAsMCwwLS4yNi44MVYyOC4zYTEuNDMsMS40MywwLDAsMCwxLjQzLDEuNDEsMS40LDEuNCwwLDAsMCwuNzUtLjIybDguNDctNS40M2ExLjQyLDEuNDIsMCwwLDAsLjQyLTIsMS40NSwxLjQ1LDAsMCwwLS4zNi0uMzhabS0xLDEuMTVhLjIuMiwwLDAsMSwuMzItLjE3bDguNDYsNi4wN2EuMjIuMjIsMCwwLDEsMCwuMjlzMCwwLDAsLjA1TDUuNzUsMjguNDdhLjIuMiwwLDAsMS0uMjgtLjA2LjIuMiwwLDAsMSwwLS4xMVoiIHN0eWxlPSJmaWxsOiM4ODgiLz48cGF0aCBkPSJNMTcuNTYsMjkuMTdhLjYxLjYxLDAsMCwwLDEuMjIsMFYxNS44M2EuNjEuNjEsMCwwLDAtMS4yMiwwaDBaIiBzdHlsZT0iZmlsbDojZmZjMDE3Ii8+PHBhdGggZD0iTTE2LjgyLDI1LjkxYTEuMzUsMS4zNSwwLDAsMCwyLjcsMFYxOS4wOWExLjM1LDEuMzUsMCwxLDAtMi43LDBoMFoiIHN0eWxlPSJmaWxsOiNmZmMwMTciLz48L3N2Zz4=",hoverIcon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNNC4yMiwxNi44YTEuNDMsMS40MywwLDAsMSwxLjQzLTEuNDEsMS4zOSwxLjM5LDAsMCwxLC44MS4yNmw4LjQ3LDYuMDdhMS40MiwxLjQyLDAsMCwxLC4zMiwyLDEuNDQsMS40NCwwLDAsMS0uMzguMzZMNi40LDI5LjQ5YTEuNDIsMS40MiwwLDAsMS0yLS40NCwxLjQsMS40LDAsMCwxLS4yMi0uNzVaIiBzdHlsZT0iZmlsbDojY2NjIi8+PHBhdGggZD0iTTE3LjU2LDI5LjE3YS42MS42MSwwLDAsMCwxLjIyLDBWMTUuODNhLjYxLjYxLDAsMCwwLTEuMjIsMGgwWiIgc3R5bGU9ImZpbGw6I2ZmYzAxNyIvPjxwYXRoIGQ9Ik0xNi44MiwyNS45MWExLjM1LDEuMzUsMCwwLDAsMi43LDBWMTkuMDlhMS4zNSwxLjM1LDAsMSwwLTIuNywwaDBaIiBzdHlsZT0iZmlsbDojZmZjMDE3Ii8+PC9zdmc+",onClick:()=>this._onNextKey()}),(0,o.jsx)(uo,{tooltip:"Advance to the next frame",id:"next-frame",context:this.props.context,globalState:this.props.globalState,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNNi40NiwxNS42NWExLjQyLDEuNDIsMCwwLDAtMiwuMzQsMS4zOSwxLjM5LDAsMCwwLS4yNi44MVYyOC4zYTEuNDMsMS40MywwLDAsMCwxLjQzLDEuNDEsMS40LDEuNCwwLDAsMCwuNzUtLjIybDguNDctNS40M2ExLjQyLDEuNDIsMCwwLDAsLjQyLTIsMS40NSwxLjQ1LDAsMCwwLS4zNi0uMzhabS0xLDEuMTVhLjIuMiwwLDAsMSwuMzItLjE3bDguNDYsNi4wN2EuMjIuMjIsMCwwLDEsMCwuMjlzMCwwLDAsLjA1TDUuNzUsMjguNDdhLjIuMiwwLDAsMS0uMjgtLjA2LjIuMiwwLDAsMSwwLS4xMVoiIHN0eWxlPSJmaWxsOiM4ODgiLz48cGF0aCBkPSJNMTcuNTYsMjkuMTdhLjYxLjYxLDAsMCwwLDEuMjIsMFYxNS44M2EuNjEuNjEsMCwwLDAtMS4yMiwwaDBaIiBzdHlsZT0iZmlsbDojODg4Ii8+PC9zdmc+",hoverIcon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNNC4yMiwxNi44YTEuNDMsMS40MywwLDAsMSwxLjQzLTEuNDEsMS4zOSwxLjM5LDAsMCwxLC44MS4yNmw4LjQ3LDYuMDdhMS40MiwxLjQyLDAsMCwxLC4zMiwyLDEuNDQsMS40NCwwLDAsMS0uMzguMzZMNi40LDI5LjQ5YTEuNDIsMS40MiwwLDAsMS0yLS40NCwxLjQsMS40LDAsMCwxLS4yMi0uNzVaIiBzdHlsZT0iZmlsbDojY2NjIi8+PHBhdGggZD0iTTE4Ljc4LDE1LjgzYS42MS42MSwwLDAsMC0xLjIyLDBWMjkuMTdhLjYxLjYxLDAsMCwwLDEuMjIsMFoiIHN0eWxlPSJmaWxsOiNjY2MiLz48L3N2Zz4=",onClick:()=>this._onNextFrame()}),(0,o.jsx)(uo,{tooltip:"Advance to the last frame of the selected timeline",id:"end-key",context:this.props.context,globalState:this.props.globalState,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMTEuNjcsMTYuMzEsMTksMjJhLjYxLjYxLDAsMCwxLC4xNS44NUEuNTQuNTQsMCwwLDEsMTksMjNsLTcuMzUsNS43MWEuNjEuNjEsMCwwLDEtLjg2LS4wOC42My42MywwLDAsMS0uMTQtLjRWMjQuMDdMNC43NCwyOC42OWEuNjEuNjEsMCwwLDEtLjg2LS4wOC42My42MywwLDAsMS0uMTQtLjRWMTYuNzlhLjYxLjYxLDAsMCwxLC42LS42Mi42My42MywwLDAsMSwuNC4xNGw1Ljk0LDQuNjJWMTYuNzlhLjYxLjYxLDAsMCwxLC42MS0uNjFBLjU4LjU4LDAsMCwxLDExLjY3LDE2LjMxWk0xMS45MSwxOHY5bDUuNzMtNC40NlpNNSwxOHY5bDUuNzEtNC40NGgwWiIgc3R5bGU9ImZpbGw6Izg4OCIvPjwvc3ZnPg==",hoverIcon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDIzIDQ1Ij48cmVjdCB3aWR0aD0iMjMiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMTEuNjcsMTYuMzEsMTksMjJhLjYxLjYxLDAsMCwxLC4xNS44NUEuNTQuNTQsMCwwLDEsMTksMjNsLTcuMzUsNS43MWEuNjEuNjEsMCwwLDEtLjg2LS4wOC42My42MywwLDAsMS0uMTQtLjRWMjQuMDdMNC43NCwyOC42OWEuNjEuNjEsMCwwLDEtLjg2LS4wOC42My42MywwLDAsMS0uMTQtLjRWMTYuNzlhLjYxLjYxLDAsMCwxLC42LS42Mi42My42MywwLDAsMSwuNC4xNGw1Ljk0LDQuNjJWMTYuNzlhLjYxLjYxLDAsMCwxLC42MS0uNjFBLjU4LjU4LDAsMCwxLDExLjY3LDE2LjMxWiIgc3R5bGU9ImZpbGw6I2NjYyIvPjwvc3ZnPg==",onClick:()=>this._onEndKey()})]})}}const go="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDIwIDIxIj48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMTMuNjgsMTcuMzlWMy42MUEuNi42LDAsMCwxLDE0LjMyLDNhLjYxLjYxLDAsMCwxLC41Ny41VjE3LjM5YS42MS42MSwwLDEsMS0xLjIyLjA4Wm0tNC4yOSwwVjMuNjFBLjYxLjYxLDAsMCwxLDEwLDNhLjYyLjYyLDAsMCwxLC42MS41M1YxNy4zOUEuNi42LDAsMCwxLDEwLDE4YS42MS42MSwwLDAsMS0uNTctLjVabS00LjI5LDBWMy42MWEuNjEuNjEsMCwwLDEsMS4yMi0uMDhWMTcuMzlhLjYuNiwwLDAsMS0uNjQuNTguNjEuNjEsMCwwLDEtLjU3LS41WiIgc3R5bGU9ImZpbGw6IzMzMyIvPjwvc3ZnPg==";class Co extends s.Component{constructor(e){super(e),this._viewWidth=748,this.state={},this._rangeHost=s.createRef(),this._rangeScrollbarHost=s.createRef(),this.props.context.onHostWindowResized.add((()=>{this._computeSizes()})),this.props.context.onFrameSet.add((()=>{this.forceUpdate()})),this.props.context.onAnimationsLoaded.add((()=>{this.forceUpdate()})),this._updateLimits()}_computeSizes(){this._rangeHost.current&&(this._viewWidth=this._rangeHost.current.clientWidth-4,this.forceUpdate())}_onPointerDown(e){this._bothHandleIsActive=!1,"left-handle"===e.nativeEvent.target.id?this._leftHandleIsActive=!0:"right-handle"===e.nativeEvent.target.id?this._leftHandleIsActive=!1:(this._bothHandleIsActive=!0,this._currentOffset=e.nativeEvent.clientX,this._currentFrom=this.props.context.fromKey,this._currentTo=this.props.context.toKey),this._pointerIsDown=!0,e.currentTarget.setPointerCapture(e.pointerId)}_onPointerMove(e){if(!this._pointerIsDown)return;if(!this.props.context.animations||!this.props.context.animations.length)return;this._updateLimits();let t=e.nativeEvent.offsetX;this._bothHandleIsActive&&(t=e.nativeEvent.clientX-this._currentOffset);let s=t/this._viewWidth*(this._maxFrame-this._minFrame);const r=Math.min(this._maxFrame,Math.max(this._minFrame,Math.round(this._minFrame+s)));this._bothHandleIsActive?(this._currentTo+s>this._maxFrame&&(s=this._maxFrame-this._currentTo),this._currentFrom+sthis._maxFrame&&(this.props.context.toKey=this._maxFrame),(0,o.jsx)("div",{id:"range-selector",ref:this._rangeHost,onPointerDown:e=>this._onPointerDown(e),onPointerMove:e=>this._onPointerMove(e),onPointerUp:e=>this._onPointerUp(e),children:(0,o.jsxs)("div",{id:"range-scrollbar",ref:this._rangeScrollbarHost,style:{left:2+(this.props.context.fromKey-this._minFrame)/e*this._viewWidth+"px",right:2+(this._maxFrame-this.props.context.toKey)/e*this._viewWidth+"px"},children:[(0,o.jsx)("div",{id:"left-handle",className:"handle",children:(0,o.jsx)("img",{src:go})}),(0,o.jsx)("div",{id:"from-key",children:0|this.props.context.fromKey}),(0,o.jsx)("div",{id:"to-key",children:0|this.props.context.toKey}),(0,o.jsx)("div",{id:"right-handle",className:"handle",children:(0,o.jsx)("img",{src:go})})]})})}}var fo=p(2685),vo={};vo.styleTagTransform=Gr(),vo.setAttributes=Rr(),vo.insert=Tr().bind(null,"head"),vo.domAPI=Ir(),vo.insertStyleElement=Br(),Pr()(fo.A,vo),fo.A&&fo.A.locals&&fo.A.locals;class xo extends s.Component{constructor(e){super(e),this.state={clipLength:this.props.context.clipLength?this.props.context.clipLength.toFixed(0):this.props.context.referenceMaxFrame.toFixed(0)},this._onAnimationsLoadedObserver=this.props.context.onAnimationsLoaded.add((()=>{this.forceUpdate()})),this._onActiveAnimationChangedObserver=this.props.context.onActiveAnimationChanged.add((()=>{this.forceUpdate()})),this._onClipLengthIncreasedObserver=this.props.context.onClipLengthIncreased.add((e=>{this.props.context.clipLength=e,this.props.context.onMoveToFrameRequired.notifyObservers(e),null!==this.props.context.getKeyAtAnyFrameIndex(e)||this.props.context.onCreateOrUpdateKeyPointRequired.notifyObservers(),this.setState({clipLength:e.toFixed(0)})})),this._onClipLengthIncreasedObserver=this.props.context.onClipLengthDecreased.add((e=>{this.props.context.clipLength=e,this.props.context.onMoveToFrameRequired.notifyObservers(e),null!==this.props.context.getKeyAtAnyFrameIndex(e)||this.props.context.onCreateOrUpdateKeyPointRequired.notifyObservers(),this.props.context.toKey=Math.min(this.props.context.toKey,this.props.context.clipLength),this.props.context.onRangeUpdated.notifyObservers(),this.setState({clipLength:e.toFixed(0)})}))}_changeClipLength(e){const t=this.props.context.clipLength||this.props.context.referenceMaxFrame;te&&this.props.context.onClipLengthDecreased.notifyObservers(e),this.setState({clipLength:e.toFixed(0)})}componentWillUnmount(){this._onAnimationsLoadedObserver&&this.props.context.onAnimationsLoaded.remove(this._onAnimationsLoadedObserver),this._onActiveAnimationChangedObserver&&this.props.context.onActiveAnimationChanged.remove(this._onActiveAnimationChangedObserver),this._onClipLengthDecreasedObserver&&this.props.context.onClipLengthDecreased.remove(this._onClipLengthDecreasedObserver),this._onClipLengthIncreasedObserver&&this.props.context.onClipLengthDecreased.remove(this._onClipLengthIncreasedObserver)}render(){return(0,o.jsxs)("div",{id:"bottom-bar",children:[(0,o.jsx)(mo,{globalState:this.props.globalState,context:this.props.context}),(0,o.jsx)(Co,{globalState:this.props.globalState,context:this.props.context}),this.props.context.activeAnimations.length>0&&(0,o.jsx)("div",{id:"bottom-bar-total",children:(0,o.jsx)(ho,{isNumber:!0,value:this.state.clipLength,tooltip:"Clip Length",id:"clip-range",onValueAsNumberChanged:(e,t)=>{!t&&this._changeClipLength(e)},globalState:this.props.globalState,context:this.props.context})})]})}}class yo extends s.Component{constructor(e){super(e),this.state={}}render(){return(0,o.jsx)("div",{title:this.props.tooltip,className:"action-button"+(this.props.isActive?" active":"")+(this.props.className?" "+this.props.className:""),id:this.props.id,onClick:()=>this.props.onClick(),children:(0,o.jsx)("img",{className:"action-button-image",src:this.props.icon})})}}var Oo=p(2063),jo={};jo.styleTagTransform=Gr(),jo.setAttributes=Rr(),jo.insert=Tr().bind(null,"head"),jo.domAPI=Ir(),jo.insertStyleElement=Br(),Pr()(Oo.A,jo),Oo.A&&Oo.A.locals&&Oo.A.locals;class So extends s.Component{constructor(e){super(e),this.state={keyFrameValue:"",keyValue:"",frameControlEnabled:!1,valueControlEnabled:!1},this._onFrameSetObserver=this.props.context.onFrameSet.add((e=>{this.setState({keyFrameValue:e.toFixed(0)})})),this._onValueSetObserver=this.props.context.onValueSet.add((e=>{this.setState({keyValue:e.toFixed(2)})})),this._onActiveAnimationChangedObserver=this.props.context.onActiveAnimationChanged.add((()=>{this.setState({keyFrameValue:"",keyValue:""})})),this._onActiveKeyPointChanged=this.props.context.onActiveKeyPointChanged.add((()=>{const e=this.props.context.activeKeyPoints?.length||0,t=new Set(this.props.context.activeKeyPoints?.map((e=>e.props.curve.animation.uniqueId))).size,s=1===e&&1===t||e>1&&t>1,r=e>0,n=this.props.context.hasActiveQuaternionAnimationKeyPoints();this.setState({keyFrameValue:"",keyValue:"",frameControlEnabled:s&&!n,valueControlEnabled:r&&!n})}))}componentWillUnmount(){this._onFrameSetObserver&&this.props.context.onFrameSet.remove(this._onFrameSetObserver),this._onValueSetObserver&&this.props.context.onValueSet.remove(this._onValueSetObserver),this._onActiveAnimationChangedObserver&&this.props.context.onActiveAnimationChanged.remove(this._onActiveAnimationChangedObserver),this._onActiveKeyPointChanged&&this.props.context.onActiveKeyPointChanged.remove(this._onActiveKeyPointChanged)}render(){const e=this.props.context.activeAnimations.length>0;return(0,o.jsxs)("div",{id:"top-bar",children:[(0,o.jsx)("img",{id:"top-bar-logo",src:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cG9seWdvbiBwb2ludHM9IjIyLjE0IDcuNTcgMTEuMzcgMTMuNzggMTEuMzcgMjYuMjIgMjIuMTQgMzIuNDQgMzIuOTEgMjYuMjIgMzIuOTEgMTMuNzggMjIuMTQgNy41NyIgc3R5bGU9ImZpbGw6I2ZmZiIvPjxyZWN0IHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgc3R5bGU9ImZpbGw6bm9uZSIvPjxwb2x5Z29uIHBvaW50cz0iMzIuOTEgMTMuNzggMjkuNTQgMTEuODQgMjYuMjkgMTMuNzEgMjkuNjYgMTUuNjUgMzIuOTEgMTMuNzgiIHN0eWxlPSJmaWxsOiNlMDY4NGIiLz48cG9seWdvbiBwb2ludHM9IjE0LjYxIDE1LjY1IDI1LjM4IDkuNDQgMjIuMTQgNy41NyAxMS4zNyAxMy43OCAxNC42MSAxNS42NSIgc3R5bGU9ImZpbGw6I2UwNjg0YiIvPjxwb2x5Z29uIHBvaW50cz0iMTguNzcgMjEuOTUgMjIuMTQgMjMuODkgMjUuNTEgMjEuOTUgMjIuMTQgMjAgMTguNzcgMjEuOTUiIHN0eWxlPSJmaWxsOiNlMDY4NGIiLz48cG9seWdvbiBwb2ludHM9IjI5LjY2IDE1LjY1IDI5LjY2IDI0LjM0IDIyLjE0IDI4LjY5IDE0LjYxIDI0LjM0IDE0LjYxIDE1LjY1IDExLjM3IDEzLjc4IDExLjM3IDI2LjIyIDIyLjE0IDMyLjQ0IDMyLjkxIDI2LjIyIDMyLjkxIDEzLjc4IDI5LjY2IDE1LjY1IiBzdHlsZT0iZmlsbDojYmI0NjRiIi8+PHBvbHlnb24gcG9pbnRzPSIyMi4xNCAxNi4xMSAxOC43NyAxOC4wNSAxOC43NyAyMS45NSAyMi4xNCAyMCAyNS41MSAyMS45NSAyNS41MSAxOC4wNSAyMi4xNCAxNi4xMSIgc3R5bGU9ImZpbGw6I2JiNDY0YiIvPjxwb2x5Z29uIHBvaW50cz0iMjkuNjYgMTUuNjUgMjUuNTEgMTguMDUgMjUuNTEgMjEuOTUgMjIuMTQgMjMuODkgMjIuMTQgMjguNjkgMjkuNjYgMjQuMzQgMjkuNjYgMTUuNjUiIHN0eWxlPSJmaWxsOiNlMGRlZDgiLz48cG9seWdvbiBwb2ludHM9IjE0LjYxIDE1LjY1IDE4Ljc3IDE4LjA1IDE4Ljc3IDIxLjk1IDIyLjE0IDIzLjg5IDIyLjE0IDI4LjY5IDE0LjYxIDI0LjM0IDE0LjYxIDE1LjY1IiBzdHlsZT0iZmlsbDojZDVkMmNhIi8+PHBvbHlnb24gcG9pbnRzPSIyNS4zOCA5LjQ0IDI5LjU0IDExLjg0IDI2LjI5IDEzLjcxIDI5LjY2IDE1LjY1IDI1LjUxIDE4LjA1IDIyLjE0IDE2LjExIDE4Ljc3IDE4LjA1IDE0LjYxIDE1LjY1IDI1LjM4IDkuNDQiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4="}),(0,o.jsx)("div",{id:"top-bar-parent-name",children:this.props.context.title}),(0,o.jsx)(ho,{className:e&&this.state.frameControlEnabled?"":"disabled",isNumber:!0,value:this.state.keyFrameValue,tooltip:"Frame",id:"key-frame",onValueAsNumberChanged:e=>{0!==e&&this.props.context.onFrameManuallyEntered.notifyObservers(e)},globalState:this.props.globalState,context:this.props.context,disabled:0===parseFloat(this.state.keyFrameValue)}),(0,o.jsx)(ho,{className:e&&this.state.valueControlEnabled?"":"disabled",isNumber:!0,value:this.state.keyValue,tooltip:"Value",id:"key-value",onValueAsNumberChanged:e=>this.props.context.onValueManuallyEntered.notifyObservers(e),globalState:this.props.globalState,context:this.props.context}),(0,o.jsx)(yo,{className:e?"":"disabled",tooltip:"New key",id:"new-key",globalState:this.props.globalState,context:this.props.context,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMjEuODMsMTQuODNsMy4zNCwzLjM0YTIuNTksMi41OSwwLDAsMSwwLDMuNjZsLTMuMzQsMy4zNGEyLjU5LDIuNTksMCwwLDEtMy42NiwwbC0zLjM0LTMuMzRhMi41OSwyLjU5LDAsMCwxLDAtMy42NmwzLjM0LTMuMzRBMi41OSwyLjU5LDAsMCwxLDIxLjgzLDE0LjgzWk0xOSwxNS42OCwxNS42OCwxOWExLjM3LDEuMzcsMCwwLDAtLjA2LDEuOTRsLjA2LjA2TDE5LDI0LjMyYTEuMzcsMS4zNywwLDAsMCwxLjk0LjA2bC4wNi0uMDZMMjQuMzIsMjFhMS4zNywxLjM3LDAsMCwwLC4wNi0xLjk0TDI0LjMyLDE5LDIxLDE1LjY4YTEuMzcsMS4zNywwLDAsMC0xLjk0LS4wNloiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4=",onClick:()=>this.props.context.onCreateOrUpdateKeyPointRequired.notifyObservers()}),(0,o.jsx)(yo,{tooltip:"Frame canvas",id:"frame-canvas",globalState:this.props.globalState,context:this.props.context,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTQuMDUsMTVhMSwxLDAsMCwxLDEtMWgxLjU5YS42LjYsMCwwLDAsLjU5LS42LjU4LjU4LDAsMCwwLS41OS0uNTlIMTVBMi4xOCwyLjE4LDAsMCwwLDEyLjg2LDE1djEuNTlhLjU4LjU4LDAsMCwwLC41OS41OWgwYS42LjYsMCwwLDAsLjYtLjU5Wm0wLDEwYTEsMSwwLDAsMCwxLDFoMS41OWEuNi42LDAsMCwxLC41OS42LjU4LjU4LDAsMCwxLS41OS41OUgxNUEyLjE4LDIuMTgsMCwwLDEsMTIuODYsMjVWMjMuMzdhLjU4LjU4LDAsMCwxLC41OS0uNTloMGEuNi42LDAsMCwxLC42LjU5Wk0yNSwxNC4wNWExLDEsMCwwLDEsMSwxdjEuNTlhLjYuNiwwLDAsMCwuNi41OS41OC41OCwwLDAsMCwuNTktLjU5aDBWMTVBMi4xOCwyLjE4LDAsMCwwLDI1LDEyLjg2SDIzLjM3YS41OC41OCwwLDAsMC0uNTkuNTloMGEuNi42LDAsMCwwLC41OS42Wm0xLDExYTEsMSwwLDAsMS0xLDFIMjMuMzdhLjYuNiwwLDAsMC0uNTkuNi41OC41OCwwLDAsMCwuNTkuNTlIMjVBMi4xOCwyLjE4LDAsMCwwLDI3LjE0LDI1VjIzLjM3YS41OC41OCwwLDAsMC0uNTktLjU5aDBhLjYuNiwwLDAsMC0uNi41OVoiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4=",onClick:()=>this.props.context.onFrameRequired.notifyObservers()}),(0,o.jsx)(yo,{className:this.props.context.activeKeyPoints&&this.props.context.activeKeyPoints.length>0?"":"disabled",tooltip:"Flatten tangent",id:"flatten-tangent",globalState:this.props.globalState,context:this.props.context,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMjgsMTguNWExLjUxLDEuNTEsMCwwLDAtMS40MSwxSDExLjV2MUgyNi41OWExLjUsMS41LDAsMSwwLDEuNDEtMloiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4=",onClick:()=>this.props.context.onFlattenTangentRequired.notifyObservers()}),(0,o.jsx)(yo,{className:this.props.context.activeKeyPoints&&this.props.context.activeKeyPoints.length>0?"":"disabled",tooltip:"Linear tangent",id:"linear-tangent",globalState:this.props.globalState,context:this.props.context,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMjYsMTRhMS40OSwxLjQ5LDAsMCwwLTIuNCwxLjY5bC0xMCwxMCwuNzEuNzEsMTAtMTBBMS40OSwxLjQ5LDAsMCwwLDI2LDE0WiIgc3R5bGU9ImZpbGw6I2ZmZiIvPjwvc3ZnPg==",onClick:()=>this.props.context.onLinearTangentRequired.notifyObservers()}),(0,o.jsx)(yo,{className:this.props.context.activeKeyPoints&&this.props.context.activeKeyPoints.length>0?"":"disabled",tooltip:"Break tangent",id:"break-tangent",globalState:this.props.globalState,context:this.props.context,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMjcuMTEsMTMuMDVhMS40OSwxLjQ5LDAsMCwwLTIuMDUuNTMsMS40NywxLjQ3LDAsMCwwLC4xNCwxLjcybC00Ljc4LDhMMjAsMjIuOTJsLS40Mi40Mi00Ljc4LThhMS40NywxLjQ3LDAsMCwwLC4xNC0xLjcyLDEuNDksMS40OSwwLDAsMC0yLS41MywxLjUsMS41LDAsMCwwLDEsMi43Nmw0LjkxLDguMjYtMSwxTDIwLDI3LjE2LDIyLjEyLDI1bC0xLTEsNC45MS04LjI2YTEuNSwxLjUsMCwwLDAsMS4wNS0yLjc2WiIgc3R5bGU9ImZpbGw6I2ZmZiIvPjwvc3ZnPg==",onClick:()=>this.props.context.onBreakTangentRequired.notifyObservers()}),(0,o.jsx)(yo,{className:this.props.context.activeKeyPoints&&this.props.context.activeKeyPoints.length>0?"":"disabled",tooltip:"Unify tangent",id:"unify-tangent",globalState:this.props.globalState,context:this.props.context,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMjcuOTQsMTguMjhhMS40OSwxLjQ5LDAsMCwwLTEuNDEsMWgtNWwtMS42Mi0xLjYzLTEuNjIsMS42M2gtNWExLjUsMS41LDAsMSwwLDAsMWg1bDEuNjIsMS42MiwxLjYyLTEuNjJoNWExLjUsMS41LDAsMSwwLDEuNDEtMloiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4=",onClick:()=>this.props.context.onUnifyTangentRequired.notifyObservers()}),(0,o.jsx)(yo,{className:this.props.context.activeKeyPoints&&this.props.context.activeKeyPoints.length>0?"":"disabled",tooltip:"Step tangent",id:"step-tangent",globalState:this.props.globalState,context:this.props.context,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMjksMTYuNzFhMS41LDEuNSwwLDEsMC0yLDEuNDF2NS42N0gxMXYxSDI4VjE4LjEyQTEuNTEsMS41MSwwLDAsMCwyOSwxNi43MVoiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4=",onClick:()=>this.props.context.onStepTangentRequired.notifyObservers()})]})}}class Mo extends s.Component{constructor(e){super(e),this._graphAbsoluteWidth=788,this._viewWidth=748,this._viewScale=1,this._offsetX=0,this.state={},this._svgHost=s.createRef(),this.props.context.onHostWindowResized.add((()=>{this._computeSizes()})),this._onActiveAnimationChangedObserver=this.props.context.onActiveAnimationChanged.add((()=>{this._computeSizes(),this.forceUpdate()})),this.props.context.onGraphMoved.add((e=>{this._offsetX=e,this.forceUpdate()})),this.props.context.onGraphScaled.add((e=>{this._viewScale=e,this.forceUpdate()}))}componentWillUnmount(){this._onActiveAnimationChangedObserver&&this.props.context.onActiveAnimationChanged.remove(this._onActiveAnimationChangedObserver)}_computeSizes(){this._svgHost.current&&(this._viewWidth=this._svgHost.current.clientWidth,this.forceUpdate())}_buildFrames(){if(0===this.props.context.activeAnimations.length)return null;const e=this.props.context.referenceMinFrame,t=(this.props.context.referenceMaxFrame-e)/this._graphAbsoluteWidth,s=Math.max(25*this._viewScale,35);let r=Math.floor(s*t);const n=[];0===r&&(r=1);const a=this._offsetX*t,i=e-(a/r|0)*r,l=i+this._viewWidth*this._viewScale*t;for(let e=i-r;e<=l+r;e+=r)n.push(e);return n.map((s=>{const r=(s-e)/t;return(0,o.jsxs)("g",{children:[(0,o.jsx)("line",{x1:r,y1:5*this._viewScale+"px",x2:r,y2:30*this._viewScale+"px",style:{stroke:"#333333",strokeWidth:.5}},"line"+s),(0,o.jsx)("text",{x:r,y:0,dx:7*this._viewScale+"px",textAnchor:"middle",dy:15*this._viewScale+"px",style:{fontFamily:"acumin-pro-condensed",fontSize:10*this._viewScale+"px",fill:"#555555",textAlign:"center"},children:s.toFixed(0)},"label"+s)]},"axis"+s)}))}render(){const e=`${-this._offsetX} 0 ${Math.round(this._viewWidth*this._viewScale)} ${Math.round(30*this._viewScale)}`;return(0,o.jsxs)("div",{id:"frame-bar",children:[this.props.context.activeAnimations.length>0&&(0,o.jsx)("div",{id:"angle-unit"}),(0,o.jsx)("div",{id:"frames",children:(0,o.jsx)("svg",{id:"svg-frames",viewBox:e,ref:this._svgHost,children:this._buildFrames()})})]})}}class wo{constructor(e,t,s,r,o,a){this.keys=[],this.onDataUpdatedObservable=new n.Observable,this.color=e,this.animation=t,this.property=s,this.tangentBuilder=r,this.setDefaultInTangent=o,this.setDefaultOutTangent=a}getPathData(e,t){const s=this.keys;if(s.length<2)return"";let r=`M${e(s[0].frame)} ${t(s[0].value)}`;const o=this.animation.dataType;for(let a=1;a{-1!==this.props.context.activeKeyPoints?.indexOf(this)||this.props.context.activeKeyPoints?.push(this)})),this._onUnifyTangentRequiredObserver=this.props.context.onUnifyTangentRequired.add((()=>{-1!==this.props.context.activeKeyPoints?.indexOf(this)&&this._unifyTangent()})),this._onBreakTangentRequiredObserver=this.props.context.onBreakTangentRequired.add((()=>{-1!==this.props.context.activeKeyPoints?.indexOf(this)&&this._breakTangent()})),this._onFlattenTangentRequiredObserver=this.props.context.onFlattenTangentRequired.add((()=>{-1!==this.props.context.activeKeyPoints?.indexOf(this)&&this._flattenTangent()})),this._onLinearTangentRequiredObserver=this.props.context.onLinearTangentRequired.add((()=>{-1!==this.props.context.activeKeyPoints?.indexOf(this)&&this._linearTangent()})),this._onStepTangentRequiredObserver=this.props.context.onStepTangentRequired.add((()=>{-1!==this.props.context.activeKeyPoints?.indexOf(this)&&this._stepTangent()})),this._onSelectionRectangleMovedObserver=this.props.context.onSelectionRectangleMoved.add((e=>{if(!this._keyPointSVG.current)return;if(this.props.curve.animation.dataType===n.Animation.ANIMATIONTYPE_QUATERNION)return;const t=this._keyPointSVG.current.getBoundingClientRect(),s=!(e.rightt.right||e.bottomt.bottom);this.props.context.activeKeyPoints||(this.props.context.activeKeyPoints=[]);const r=this.props.context.activeKeyPoints.indexOf(this);s?-1===r&&(this.props.context.activeKeyPoints.push(this),this.props.context.onActiveKeyPointChanged.notifyObservers()):r>-1&&(this.props.context.activeKeyPoints.splice(r,1),this.props.context.onActiveKeyPointChanged.notifyObservers())})),this._onMainKeyPointSetObserver=this.props.context.onMainKeyPointSet.add((()=>{this.props.context.mainKeyPoint&&this.props.context.mainKeyPoint!==this&&(this._offsetXToMain=this.state.x-this.props.context.mainKeyPoint?.state.x,this._offsetYToMain=this.state.y-this.props.context.mainKeyPoint?.state.y)})),this._onMainKeyPointMovedObserver=this.props.context.onMainKeyPointMoved.add((()=>{const e=this.props.context.mainKeyPoint;if(e!==this&&e){if(this.state.selectedState!==Po.None&&0!==this.props.keyId){const t=e.state.x+this._offsetXToMain;this.setState({x:t}),this.props.onFrameValueChanged(this.props.invertX(t))}if(this.state.selectedState===Po.Selected){const t=e.state.y+this._offsetYToMain;this.setState({y:t}),this.props.onKeyValueChanged(this.props.invertY(t))}}})),this._onActiveKeyPointChangedObserver=this.props.context.onActiveKeyPointChanged.add((()=>{const e=-1!==this.props.context.activeKeyPoints?.indexOf(this);if(!e&&this.props.context.activeKeyPoints){const e=this.props.curve;let t=Po.None;for(const s of this.props.context.activeKeyPoints)if(s.props.keyId===this.props.keyId&&e!==s.props.curve&&e.animation===s.props.curve.animation){t=Po.Siblings;break}this.setState({selectedState:t,tangentSelectedIndex:-1})}else this.setState({selectedState:Po.Selected,tangentSelectedIndex:-1});e&&(this.props.context.onFrameSet.notifyObservers(this.props.invertX(this.state.x)),this.props.context.onValueSet.notifyObservers(this.props.invertY(this.state.y)))})),this._onActiveKeyFrameChangedObserver=this.props.context.onActiveKeyFrameChanged.add((e=>{this.state.selectedState!==Po.Siblings||this.props.context.mainKeyPoint||(this.setState({x:e}),this.props.onFrameValueChanged(this.props.invertX(e)))})),this._onFrameManuallyEnteredObserver=this.props.context.onFrameManuallyEntered.add((e=>{if(this.state.selectedState===Po.None)return;let t=this.props.convertX(e);const s=this.props.getPreviousX(),r=this.props.getNextX();null!==s&&(t=Math.max(s,t)),null!==r&&(t=Math.min(r,t));const n=this.props.invertX(t);this.setState({x:t}),this.props.onFrameValueChanged(n)})),this._onValueManuallyEnteredObserver=this.props.context.onValueManuallyEntered.add((e=>{if(this.state.selectedState!==Po.Selected)return;const t=this.props.convertY(e);this.setState({y:t}),this.props.onKeyValueChanged(e)}))}componentWillUnmount(){this._onSelectAllKeysObserver&&this.props.context.onSelectAllKeys.remove(this._onSelectAllKeysObserver),this._onUnifyTangentRequiredObserver&&this.props.context.onUnifyTangentRequired.remove(this._onUnifyTangentRequiredObserver),this._onBreakTangentRequiredObserver&&this.props.context.onBreakTangentRequired.remove(this._onBreakTangentRequiredObserver),this._onFlattenTangentRequiredObserver&&this.props.context.onFlattenTangentRequired.remove(this._onFlattenTangentRequiredObserver),this._onLinearTangentRequiredObserver&&this.props.context.onLinearTangentRequired.remove(this._onLinearTangentRequiredObserver),this._onStepTangentRequiredObserver&&this.props.context.onStepTangentRequired.remove(this._onStepTangentRequiredObserver),this._onSelectionRectangleMovedObserver&&this.props.context.onSelectionRectangleMoved.remove(this._onSelectionRectangleMovedObserver),this._onMainKeyPointSetObserver&&this.props.context.onMainKeyPointSet.remove(this._onMainKeyPointSetObserver),this._onMainKeyPointMovedObserver&&this.props.context.onMainKeyPointMoved.remove(this._onMainKeyPointMovedObserver),this._onActiveKeyPointChangedObserver&&this.props.context.onActiveKeyPointChanged.remove(this._onActiveKeyPointChangedObserver),this._onActiveKeyFrameChangedObserver&&this.props.context.onActiveKeyFrameChanged.remove(this._onActiveKeyFrameChangedObserver),this._onFrameManuallyEnteredObserver&&this.props.context.onFrameManuallyEntered.remove(this._onFrameManuallyEnteredObserver),this._onValueManuallyEnteredObserver&&this.props.context.onValueManuallyEntered.remove(this._onValueManuallyEnteredObserver)}shouldComponentUpdate(e,t){return e!==this.props&&(t.x=e.x,t.y=e.y),!0}_breakTangent(){this.props.context.onInterpolationModeSet.notifyObservers({keyId:this.props.keyId,value:0}),this.props.curve.updateLockedTangentMode(this.props.keyId,!1),this.forceUpdate()}_unifyTangent(){this.props.context.onInterpolationModeSet.notifyObservers({keyId:this.props.keyId,value:0}),this.props.curve.updateLockedTangentMode(this.props.keyId,!0),this.forceUpdate()}_flattenTangent(){this.props.context.onInterpolationModeSet.notifyObservers({keyId:this.props.keyId,value:0}),-1!==this.state.tangentSelectedIndex&&0!==this.state.tangentSelectedIndex||0!==this.props.keyId&&this.props.curve.updateInTangentFromControlPoint(this.props.keyId,0),-1!==this.state.tangentSelectedIndex&&1!==this.state.tangentSelectedIndex||this.props.keyId!==this.props.curve.keys.length-1&&this.props.curve.updateOutTangentFromControlPoint(this.props.keyId,0),this.forceUpdate()}_linearTangent(){this.props.context.onInterpolationModeSet.notifyObservers({keyId:this.props.keyId,value:0}),-1!==this.state.tangentSelectedIndex&&0!==this.state.tangentSelectedIndex||0!==this.props.keyId&&this.props.curve.storeDefaultInTangent(this.props.keyId),-1!==this.state.tangentSelectedIndex&&1!==this.state.tangentSelectedIndex||this.props.keyId!==this.props.curve.keys.length-1&&this.props.curve.storeDefaultOutTangent(this.props.keyId),this.props.curve.onDataUpdatedObservable.notifyObservers(),this.forceUpdate()}_stepTangent(){this.props.context.onInterpolationModeSet.notifyObservers({keyId:this.props.keyId,value:1}),this.forceUpdate()}_select(e){if(!this.props.context.activeKeyPoints)return;const t=this.props.context.activeKeyPoints.indexOf(this);-1===t?(e||(this.props.context.activeKeyPoints=[]),this.props.context.activeKeyPoints.push(this),this.props.context.activeKeyPoints.length>1?(this.props.context.mainKeyPoint=this,this.props.context.onMainKeyPointSet.notifyObservers()):this.props.context.mainKeyPoint=null):e?(this.props.context.activeKeyPoints.splice(t,1),this.props.context.mainKeyPoint=null):this.props.context.activeKeyPoints.length>1?(this.props.context.mainKeyPoint=this,this.props.context.onMainKeyPointSet.notifyObservers()):this.props.context.mainKeyPoint=null}_onPointerDown(e){this.props.context.activeKeyPoints||(this.props.context.activeKeyPoints=[]),e.preventDefault();const t=this.props.curve.animation.dataType===n.Animation.ANIMATIONTYPE_QUATERNION;if(t)return;this._select(e.nativeEvent.ctrlKey),this.props.context.onActiveKeyPointChanged.notifyObservers(),this._pointerIsDown=!0,e.currentTarget.setPointerCapture(e.pointerId),this._sourcePointerX=e.nativeEvent.offsetX,this._sourcePointerY=e.nativeEvent.offsetY;const s=e.nativeEvent.target;"image"!==s.tagName||t?s.classList.contains("left-tangent")&&!t?(this._controlMode=Eo.TangentLeft,this.setState({tangentSelectedIndex:0})):s.classList.contains("right-tangent")&&!t&&(this._controlMode=Eo.TangentRight,this.setState({tangentSelectedIndex:1})):(this._controlMode=Eo.Key,this.setState({tangentSelectedIndex:-1})),this._lockX=!1,this._lockY=!1,this._accumulatedX=0,this._accumulatedY=0,e.stopPropagation()}_extractSlope(e,t,s){s&&e.x>=0?e.x=-.01:!s&&e.x<=0&&(e.x=.01);const r=e.clone();r.normalize(),r.scaleInPlace(t);const n=this.props.curve.keys;return(s?n[this.props.keyId].value-this.props.invertY(r.y+this.state.y):this.props.invertY(r.y+this.state.y)-n[this.props.keyId].value)/(s?n[this.props.keyId].frame-this.props.invertX(r.x+this.state.x):this.props.invertX(r.x+this.state.x)-n[this.props.keyId].frame)}_processTangentMove(e,t,s,r){return t.x+=(e.nativeEvent.offsetX-this._sourcePointerX)*this.props.scale,t.y+=(e.nativeEvent.offsetY-this._sourcePointerY)*this.props.scale,this._extractSlope(t,s,r)}_onPointerMove(e){if(this._pointerIsDown&&this.state.selectedState===Po.Selected&&!this.props.context.hasActiveQuaternionAnimationKeyPoints()){if(this._controlMode===Eo.Key){const t=e.nativeEvent.offsetX-this._sourcePointerX,s=e.nativeEvent.offsetY-this._sourcePointerY;e.shiftKey?this._lockX||this._lockY||(this._accumulatedX+=Math.abs(t),this._accumulatedY+=Math.abs(s),(this._accumulatedX>5||this._accumulatedY>5)&&(this._accumulatedX>this._accumulatedY?this._lockY=!0:this._lockX=!0)):(this._lockX=!1,this._lockY=!1);let r=this.state.x+(this._lockX?0:t*this.props.scale),n=this.state.y+(this._lockY?0:s*this.props.scale);const o=this.props.getPreviousX(),a=this.props.getNextX(),i=.01;if(null!==o&&(r=Math.max(o+i,r)),null!==a&&(r=Math.min(a-i,r)),0===this.props.keyId||this.props.context.lockLastFrameFrame&&this.props.keyId===this.props.curve.keys.length-1)r=this.state.x;else{const e=this.props.invertX(r);this.props.onFrameValueChanged(e),this.props.context.onFrameSet.notifyObservers(e),r!==this.state.x&&this.props.context.onActiveKeyFrameChanged.notifyObservers(r)}this.props.context.lockLastFrameValue&&this.props.keyId===this.props.curve.keys.length-1&&(n=this.state.y);const l=this.props.invertY(n);this.props.onKeyValueChanged(l),this.props.context.onValueSet.notifyObservers(l),this.setState({x:r,y:n}),this.props.context.activeKeyPoints.length>1&&setTimeout((()=>{this.props.context.mainKeyPoint&&this.props.context.onMainKeyPointMoved.notifyObservers()}))}else{const t=this.props.curve.keys,s=t[this.props.keyId].lockedTangent&&0!==this.props.keyId&&this.props.keyId!==t.length-1;let r=0;const o=n.TmpVectors.Vector2[0];if(s){const e=n.TmpVectors.Vector2[1],t=n.TmpVectors.Vector2[2];n.Vector2.NormalizeToRef(this._inVec,e),n.Vector2.NormalizeToRef(this._outVec,t),r=Math.acos(Math.min(1,Math.max(-1,n.Vector2.Dot(e,t)))),this._inVec.rotateToRef(-r,o),n.Vector2.Distance(o,this._outVec)>.01&&(r=-r)}this._controlMode===Eo.TangentLeft?(this.props.curve.updateInTangentFromControlPoint(this.props.keyId,this._processTangentMove(e,this._inVec,this._storedLengthIn,!0)),s&&(this._inVec.rotateToRef(-r,o),o.x=Math.abs(o.x),this.props.curve.updateOutTangentFromControlPoint(this.props.keyId,this._extractSlope(o,this._storedLengthOut,!1)))):this._controlMode===Eo.TangentRight&&(this.props.curve.updateOutTangentFromControlPoint(this.props.keyId,this._processTangentMove(e,this._outVec,this._storedLengthOut,!1)),s&&(this._outVec.rotateToRef(r,o),o.x=-Math.abs(o.x),this.props.curve.updateInTangentFromControlPoint(this.props.keyId,this._extractSlope(o,this._storedLengthIn,!0)))),this.props.context.refreshTarget(),this.forceUpdate()}this.props.context.onActiveKeyDataChanged.notifyObservers(this.props.keyId),this._sourcePointerX=e.nativeEvent.offsetX,this._sourcePointerY=e.nativeEvent.offsetY,e.stopPropagation()}}_onPointerUp(e){this._pointerIsDown=!1,e.currentTarget.releasePointerCapture(e.pointerId),e.stopPropagation(),this._controlMode=Eo.None}render(){if(!this.props.context.isChannelEnabled(this.props.curve.animation,this.props.curve.color))return null;const e=this.props.curve.animation.dataType,t=e===n.Animation.ANIMATIONTYPE_COLOR3||e===n.Animation.ANIMATIONTYPE_COLOR4,s=e===n.Animation.ANIMATIONTYPE_QUATERNION,r=this.state.selectedState===Po.Selected?Lo:this.state.selectedState===Po.Siblings?ko:No,a=this.props.curve.keys,i=a[this.props.keyId].lockedTangent??!0,l=a[this.props.keyId-1]?.interpolation??!1,p=a[this.props.keyId]?.interpolation??!1,c=this.props.curve.hasDefinedInTangent(this.props.keyId),d=this.props.curve.hasDefinedOutTangent(this.props.keyId),h=this.props.invertX(this.state.x),u=this.props.invertY(this.state.y);if(c){const e=u-this.props.curve.getInControlPoint(this.props.keyId);this._inVec=new n.Vector2(this.props.convertX(h-1)-this.state.x,this.props.convertY(e)-this.state.y)}else this._inVec=new n.Vector2;if(d){const e=u+this.props.curve.getOutControlPoint(this.props.keyId);this._outVec=new n.Vector2(this.props.convertX(h+1)-this.state.x,this.props.convertY(e)-this.state.y)}else this._outVec=new n.Vector2;return this._storedLengthIn=this._inVec.length(),this._storedLengthOut=this._outVec.length(),this._inVec.normalize(),this._inVec.scaleInPlace(100*this.props.scale),this._outVec.normalize(),this._outVec.scaleInPlace(100*this.props.scale),(0,o.jsxs)("svg",{ref:this._svgHost,onPointerDown:e=>this._onPointerDown(e),onPointerMove:e=>this._onPointerMove(e),onPointerUp:e=>this._onPointerUp(e),x:this.state.x,y:this.state.y,style:{cursor:s?"auto":"pointer",overflow:"auto",opacity:s?"25%":"100%"},children:[(0,o.jsx)("image",{x:"-"+8*this.props.scale,y:"-"+8*this.props.scale,width:""+16*this.props.scale,height:""+16*this.props.scale,ref:this._keyPointSVG,href:r}),this.state.selectedState===Po.Selected&&(0,o.jsxs)("g",{children:[0!==this.props.keyId&&!l&&!t&&!s&&c&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("line",{x1:0,y1:0,x2:`${this._inVec.x}px`,y2:`${this._inVec.y}px`,style:{stroke:0===this.state.tangentSelectedIndex||-1===this.state.tangentSelectedIndex?"#F9BF00":"#AAAAAA",strokeWidth:""+1*this.props.scale,strokeDasharray:i?"":"2, 2"}}),(0,o.jsx)("circle",{className:"left-tangent",cx:`${this._inVec.x}px`,cy:`${this._inVec.y}px`,r:""+4*this.props.scale,style:{fill:0===this.state.tangentSelectedIndex||-1===this.state.tangentSelectedIndex?"#F9BF00":"#AAAAAA"}})]}),this.props.keyId!==a.length-1&&!p&&!t&&!s&&d&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("line",{x1:0,y1:0,x2:`${this._outVec.x}px`,y2:`${this._outVec.y}px`,style:{stroke:1===this.state.tangentSelectedIndex||-1===this.state.tangentSelectedIndex?"#F9BF00":"#AAAAAA",strokeWidth:""+1*this.props.scale,strokeDasharray:i?"":"2, 2"}}),(0,o.jsx)("circle",{className:"right-tangent",cx:`${this._outVec.x}px`,cy:`${this._outVec.y}px`,r:""+4*this.props.scale,style:{fill:1===this.state.tangentSelectedIndex||-1===this.state.tangentSelectedIndex?"#F9BF00":"#AAAAAA"}})]})]})]})}}class Do extends s.Component{constructor(e){super(e),this.state={isSelected:!1},this._onDataUpdatedObserver=this.props.curve.onDataUpdatedObservable.add((()=>this.forceUpdate())),this._onActiveAnimationChangedObserver=e.context.onActiveAnimationChanged.add((()=>{this._onDataUpdatedObserver&&this.props.curve.onDataUpdatedObservable.remove(this._onDataUpdatedObserver),this._onDataUpdatedObserver=null,this.forceUpdate()})),this._onInterpolationModeSetObserver=e.context.onInterpolationModeSet.add((({keyId:e,value:t})=>{this.props.curve.updateInterpolationMode(e,t)}))}componentWillUnmount(){this._onDataUpdatedObserver&&this.props.curve.onDataUpdatedObservable.remove(this._onDataUpdatedObserver),this._onActiveAnimationChangedObserver&&this.props.context.onActiveAnimationChanged.remove(this._onActiveAnimationChangedObserver),this._onInterpolationModeSetObserver&&this.props.context.onInterpolationModeSet.remove(this._onInterpolationModeSetObserver)}componentDidUpdate(){return this._onDataUpdatedObserver||(this._onDataUpdatedObserver=this.props.curve.onDataUpdatedObservable.add((()=>this.forceUpdate()))),!0}render(){if(!this.props.context.isChannelEnabled(this.props.curve.animation,this.props.curve.color))return null;const e={stroke:this.props.curve.color,fill:"none",strokeWidth:"1"};return this.props.curve.animation.dataType===n.Animation.ANIMATIONTYPE_QUATERNION&&(e["stroke-dasharray"]="5",e["stroke-opacity"]="0.5"),(0,o.jsx)("svg",{style:{cursor:"pointer",overflow:"auto"},children:(0,o.jsx)("path",{d:this.props.curve.getPathData(this.props.convertX,this.props.convertY),style:e})})}}class To extends s.Component{constructor(e){super(e),this._minScale=.5,this._maxScale=5,this._graphAbsoluteWidth=788,this._graphAbsoluteHeight=357,this._viewWidth=788,this._viewCurveWidth=788,this._viewHeight=357,this._viewScale=1,this._offsetX=0,this._offsetY=0,this._graphOffsetX=30,this.state={},this._svgHost=s.createRef(),this._svgHost2=s.createRef(),this._selectionRectangle=s.createRef(),this._evaluateKeys(),this.props.context.onHostWindowResized.add((()=>{this._computeSizes()})),this._onActiveAnimationChangedObserver=this.props.context.onActiveAnimationChanged.add((({evaluateKeys:e=!0,frame:t=!0,range:s=!0})=>{e&&this._evaluateKeys(t,s),this._computeSizes(),this.forceUpdate()})),this.props.context.onFrameRequired.add((()=>{this._frameFromActiveKeys(),this.forceUpdate()})),this.props.context.onRangeUpdated.add((()=>{this.forceUpdate()})),this.props.context.onDeleteKeyActiveKeyPoints.add((()=>{if(0!==this.props.context.activeAnimations.length&&this.props.context.activeKeyPoints){for(const e of this.props.context.activeAnimations){const t=e.getKeys(),s=t.slice(0);let r=null;for(const e of this.props.context.activeKeyPoints){if(0===e.props.keyId||e.props.keyId===t.length-1)continue;const n=t[e.props.keyId],o=s.indexOf(n);o>-1&&(s.splice(o,1),null===r&&(r=n.frame))}this.props.context.stop(),e.setKeys(s),null!==r&&this.props.context.moveToFrame(r)}this._evaluateKeys(!1,!1),this.props.context.activeKeyPoints=[],this.props.context.onActiveKeyPointChanged.notifyObservers(),this.props.context.onActiveAnimationChanged.notifyObservers({evaluateKeys:!1}),this.forceUpdate()}})),this.props.context.onCreateOrUpdateKeyPointRequired.add((()=>{if(0!==this.props.context.activeAnimations.length){for(const e of this.props.context.activeAnimations){if(e.dataType===n.Animation.ANIMATIONTYPE_QUATERNION)continue;const t=e.getKeys(),s=this.props.context.activeFrame;let r,o=-1;for(const e of t){if(!(e.framen.Vector2.Zero()),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e)))),r.push(new wo("#51E22D",e,"y",(()=>n.Vector2.Zero()),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e))));break;case n.Animation.ANIMATIONTYPE_VECTOR3:r.push(new wo("#DB3E3E",e,"x",(()=>n.Vector3.Zero()),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e)))),r.push(new wo("#51E22D",e,"y",(()=>n.Vector3.Zero()),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e)))),r.push(new wo("#00A3FF",e,"z",(()=>n.Vector3.Zero()),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e))));break;case n.Animation.ANIMATIONTYPE_COLOR3:r.push(new wo("#DB3E3E",e,"r",(()=>n.Color3.Black()),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e)))),r.push(new wo("#51E22D",e,"g",(()=>n.Color3.Black()),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e)))),r.push(new wo("#00A3FF",e,"b",(()=>n.Color3.Black()),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e))));break;case n.Animation.ANIMATIONTYPE_QUATERNION:r.push(new wo("#DB3E3E",e,"x",(()=>n.Quaternion.Zero()),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e)))),r.push(new wo("#51E22D",e,"y",(()=>n.Quaternion.Zero()),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e)))),r.push(new wo("#00A3FF",e,"z",(()=>n.Quaternion.Zero()),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e)))),r.push(new wo("#8700FF",e,"w",(()=>n.Quaternion.Zero()),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e))));break;case n.Animation.ANIMATIONTYPE_COLOR4:r.push(new wo("#DB3E3E",e,"r",(()=>new n.Color4),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e)))),r.push(new wo("#51E22D",e,"g",(()=>new n.Color4),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e)))),r.push(new wo("#00A3FF",e,"b",(()=>new n.Color4),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e)))),r.push(new wo("#8700FF",e,"a",(()=>new n.Color4),(e=>this._setDefaultInTangent(e)),(e=>this._setDefaultOutTangent(e))))}const o=this._extractValuesFromKeys(s,e.dataType,r);this._curves.push(...r),t&&(this._minValue=Math.min(this._minValue,o.min),this._maxValue=Math.max(this._maxValue,o.max),this._minFrame=Math.min(this._minFrame,s[0].frame),this._maxFrame=Math.max(this._maxFrame,s[s.length-1].frame))}e&&this._frameFromActiveKeys()}else this._curves=[]}_extractValuesFromKeys(e,t,s,r){let o=Number.MAX_VALUE,a=-Number.MAX_VALUE;for(const i of e){let e=!0;switch(void 0!==i.lockedTangent&&(e=i.lockedTangent),t){case n.Animation.ANIMATIONTYPE_FLOAT:o=Math.min(o,i.value),a=Math.max(a,i.value),s&&s[0].keys.push({frame:i.frame,value:i.value,inTangent:i.inTangent,outTangent:i.outTangent,lockedTangent:e,interpolation:i.interpolation});break;case n.Animation.ANIMATIONTYPE_VECTOR2:r&&"x"!==r||(o=Math.min(o,i.value.x),a=Math.max(a,i.value.x)),r&&"y"!==r||(o=Math.min(o,i.value.y),a=Math.max(a,i.value.y)),s&&(s[0].keys.push({frame:i.frame,value:i.value.x,inTangent:i.inTangent?.x,outTangent:i.outTangent?.x,lockedTangent:e,interpolation:i.interpolation}),s[1].keys.push({frame:i.frame,value:i.value.y,inTangent:i.inTangent?.y,outTangent:i.outTangent?.y,lockedTangent:e,interpolation:i.interpolation}));break;case n.Animation.ANIMATIONTYPE_VECTOR3:r&&"x"!==r||(o=Math.min(o,i.value.x),a=Math.max(a,i.value.x)),r&&"y"!==r||(o=Math.min(o,i.value.y),a=Math.max(a,i.value.y)),r&&"z"!==r||(o=Math.min(o,i.value.z),a=Math.max(a,i.value.z)),s&&(s[0].keys.push({frame:i.frame,value:i.value.x,inTangent:i.inTangent?.x,outTangent:i.outTangent?.x,lockedTangent:e,interpolation:i.interpolation}),s[1].keys.push({frame:i.frame,value:i.value.y,inTangent:i.inTangent?.y,outTangent:i.outTangent?.y,lockedTangent:e,interpolation:i.interpolation}),s[2].keys.push({frame:i.frame,value:i.value.z,inTangent:i.inTangent?.z,outTangent:i.outTangent?.z,lockedTangent:e,interpolation:i.interpolation}));break;case n.Animation.ANIMATIONTYPE_COLOR3:r&&"r"!==r||(o=Math.min(o,i.value.r),a=Math.max(a,i.value.r)),r&&"g"!==r||(o=Math.min(o,i.value.g),a=Math.max(a,i.value.g)),r&&"b"!==r||(o=Math.min(o,i.value.b),a=Math.max(a,i.value.b)),s&&(s[0].keys.push({frame:i.frame,value:i.value.r,inTangent:i.inTangent?.r,outTangent:i.outTangent?.r,lockedTangent:e,interpolation:i.interpolation}),s[1].keys.push({frame:i.frame,value:i.value.g,inTangent:i.inTangent?.g,outTangent:i.outTangent?.g,lockedTangent:e,interpolation:i.interpolation}),s[2].keys.push({frame:i.frame,value:i.value.b,inTangent:i.inTangent?.b,outTangent:i.outTangent?.b,lockedTangent:e,interpolation:i.interpolation}));break;case n.Animation.ANIMATIONTYPE_QUATERNION:r&&"x"!==r||(o=Math.min(o,i.value.x),a=Math.max(a,i.value.x)),r&&"y"!==r||(o=Math.min(o,i.value.y),a=Math.max(a,i.value.y)),r&&"z"!==r||(o=Math.min(o,i.value.z),a=Math.max(a,i.value.z)),r&&"w"!==r||(o=Math.min(o,i.value.w),a=Math.max(a,i.value.w)),s&&(s[0].keys.push({frame:i.frame,value:i.value.x,inTangent:i.inTangent?.x,outTangent:i.outTangent?.x,lockedTangent:e,interpolation:i.interpolation}),s[1].keys.push({frame:i.frame,value:i.value.y,inTangent:i.inTangent?.y,outTangent:i.outTangent?.y,lockedTangent:e,interpolation:i.interpolation}),s[2].keys.push({frame:i.frame,value:i.value.z,inTangent:i.inTangent?.z,outTangent:i.outTangent?.z,lockedTangent:e,interpolation:i.interpolation}),s[3].keys.push({frame:i.frame,value:i.value.w,inTangent:i.inTangent?.w,outTangent:i.outTangent?.w,lockedTangent:e,interpolation:i.interpolation}));break;case n.Animation.ANIMATIONTYPE_COLOR4:r&&"r"!==r||(o=Math.min(o,i.value.r),a=Math.max(a,i.value.r)),r&&"g"!==r||(o=Math.min(o,i.value.g),a=Math.max(a,i.value.g)),r&&"b"!==r||(o=Math.min(o,i.value.b),a=Math.max(a,i.value.b)),r&&"a"!==r||(o=Math.min(o,i.value.a),a=Math.max(a,i.value.a)),s&&(s[0].keys.push({frame:i.frame,value:i.value.r,inTangent:i.inTangent?.r,outTangent:i.outTangent?.r,lockedTangent:e,interpolation:i.interpolation}),s[1].keys.push({frame:i.frame,value:i.value.g,inTangent:i.inTangent?.g,outTangent:i.outTangent?.g,lockedTangent:e,interpolation:i.interpolation}),s[2].keys.push({frame:i.frame,value:i.value.b,inTangent:i.inTangent?.b,outTangent:i.outTangent?.b,lockedTangent:e,interpolation:i.interpolation}),s[3].keys.push({frame:i.frame,value:i.value.a,inTangent:i.inTangent?.a,outTangent:i.outTangent?.a,lockedTangent:e,interpolation:i.interpolation}))}}return{min:o,max:a}}_convertX(e){let t=this._maxFrame-this._minFrame;return 0===t&&(t=1),(e-this._minFrame)/t*this._graphAbsoluteWidth}_invertX(e){return e/this._graphAbsoluteWidth*(this._maxFrame-this._minFrame)+this._minFrame}_convertY(e){let t=this._maxValue-this._minValue;return 0===t&&(t=1),this._graphAbsoluteHeight-(e-this._minValue)/t*this._graphAbsoluteHeight}_invertY(e){let t=this._maxValue-this._minValue;return 0===t&&(t=1),(this._graphAbsoluteHeight-e)/this._graphAbsoluteHeight*t+this._minValue}_buildFrameIntervalAxis(){if(0===this.props.context.activeAnimations.length)return null;const e=this.props.context.referenceMaxFrame;let t=this.props.context.activeAnimations[0].framePerSecond;const s=e/this._graphAbsoluteWidth,r=[];0===t&&(t=1);const n=-(this._offsetX*s/t|0)*t,a=n+(this._viewWidth-40)*this._viewScale*s;for(let e=n-t;e<=a+t;e+=t)r.push(e);return r.map((e=>{const t=e/s;return(0,o.jsx)("g",{children:(0,o.jsx)("line",{x1:t,y1:0,x2:t,y2:this._viewHeight*this._viewScale,style:{stroke:"#666666",strokeWidth:1}},"line"+e)},"axis"+e)}))}_buildYAxis(){if(0===this.props.context.activeAnimations.length)return null;const e=this._maxValue!==this._minValue?this._maxValue-this._minValue:1;let t=e/10*this._viewScale;const s=e/this._graphAbsoluteHeight,r=[],n=t;let a=2;for(;(0).toFixed(a)===n.toFixed(a);)a++;const i=Math.pow(10,a);t=Math.round(t*i),t%2!=0&&(t-=1),t/=i;const l=(this._viewHeight*this._viewScale-this._graphAbsoluteHeight-this._offsetY)*s,p=Math.ceil((this._minValue-(l/t|0)*t)/t)*t,c=Math.round((p+this._viewHeight*this._viewScale*s)/t)*t;for(let e=p-t;e<=c+t;e+=t)r.push(e);return r.map((e=>{const t=this._graphAbsoluteHeight-(e-this._minValue)/s;let r=e.toFixed(a);r=parseFloat(r).toFixed(a);const n=r===(0).toFixed(a);return(0,o.jsxs)("g",{children:[(0,o.jsx)("line",{x1:this._graphOffsetX*this._viewScale,y1:t,x2:this._viewWidth*this._viewScale,y2:t,style:{stroke:n?"#666666":"#333333",strokeWidth:n?1:.5}},"line"+e),(0,o.jsx)("text",{x:0,y:t,dx:15*this._viewScale+"px",textAnchor:"middle",dy:3*this._viewScale+"px",style:{fontFamily:"acumin-pro-condensed",fontSize:10*this._viewScale+"px",fill:"#888888",textAlign:"center"},children:r},"label"+e)]},"axis"+e)}))}_frameFromActiveKeys(){if(0===this.props.context.activeAnimations.length)return;this._offsetX=20,this._offsetY=20;let e=Number.MAX_VALUE,t=-Number.MAX_VALUE,s=Number.MAX_VALUE,r=-Number.MAX_VALUE,n=!1;for(const o of this.props.context.activeAnimations){let a;const i=this.props.context.getActiveChannel(o);if(i){const e=this._curves.filter((e=>e.color===i))[0];e&&(a=e.property)}let l=o.getKeys();if(this.props.context.activeKeyPoints&&this.props.context.activeKeyPoints.length>0){const e=[];for(let t=0;t=1&&e.unshift(l[s.props.keyId-1]),t===this.props.context.activeKeyPoints.length-1&&s.props.keyId{const r=this._convertX(t.frame),n=this._convertY(t.value);return(0,o.jsx)(Io,{x:r,y:n,context:this.props.context,scale:this._viewScale,getPreviousX:()=>s>0?this._convertX(e.keys[s-1].frame):null,getNextX:()=>sthis._invertX(e),invertY:e=>this._invertY(e),convertX:e=>this._convertX(e),convertY:e=>this._convertY(e),onFrameValueChanged:t=>{e.updateKeyFrame(s,t),this.props.context.refreshTarget()},onKeyValueChanged:t=>{e.updateKeyValue(s,t),this.props.context.refreshTarget()}},"curve-"+s)}))}_onPointerDown(e){if("svg-graph-curves"!==e.nativeEvent.target.id)return;e.preventDefault(),this._pointerIsDown=!0,e.currentTarget.setPointerCapture(e.pointerId),this._sourcePointerX=e.nativeEvent.offsetX,this._sourcePointerY=e.nativeEvent.offsetY;const t=2==e.nativeEvent.which||4==e.button;this._inSelectionMode=!t&&!e.altKey,this._inSelectionMode&&(this._selectionStartX=this._sourcePointerX+40,this._selectionStartY=this._sourcePointerY)}_onPointerMove(e){if(this._pointerIsDown){if(this._inSelectionMode){const t=this._selectionRectangle.current.style;t.visibility="visible";const s=e.nativeEvent.offsetX,r=e.nativeEvent.offsetY;return s>this._selectionStartX?(t.left=`${this._selectionStartX}px`,t.width=s-this._selectionStartX+"px"):(t.left=`${s}px`,t.width=this._selectionStartX-s+"px"),r>this._selectionStartY?(t.top=`${this._selectionStartY}px`,t.height=r-this._selectionStartY+"px"):(t.top=`${r}px`,t.height=this._selectionStartY-r+"px"),s===this._selectionStartX&&r===this._selectionStartY||(this._selectionMade=!0),void this.props.context.onSelectionRectangleMoved.notifyObservers(this._selectionRectangle.current.getBoundingClientRect())}this._offsetX+=(e.nativeEvent.offsetX-this._sourcePointerX)*this._viewScale,this._offsetY+=(e.nativeEvent.offsetY-this._sourcePointerY)*this._viewScale,this._sourcePointerX=e.nativeEvent.offsetX,this._sourcePointerY=e.nativeEvent.offsetY,this.props.context.onGraphMoved.notifyObservers(this._offsetX),this.forceUpdate()}}_onPointerUp(e){this._pointerIsDown=!1,e.currentTarget.releasePointerCapture(e.pointerId),this._selectionRectangle.current.style.visibility="hidden",this._inSelectionMode&&this._selectionMade||this.props.context.clearSelection(),this._selectionMade=!1}_onWheel(e){const t=e.deltaY<0?-.05:.05,s=this._viewScale;this._viewScale=Math.min(Math.max(this._minScale,this._viewScale+t*this._viewScale),this._maxScale);const r=e.nativeEvent.offsetX,n=e.nativeEvent.offsetY,o=r*s-r*this._viewScale,a=n*s-n*this._viewScale;this._offsetX-=o,this._offsetY-=a,this.forceUpdate(),e.stopPropagation(),this.props.context.onGraphMoved.notifyObservers(this._offsetX),this.props.context.onGraphScaled.notifyObservers(this._viewScale)}render(){const e=this._viewScale,t=`${-this._offsetX} ${-this._offsetY} ${Math.round(e*this._viewCurveWidth)} ${Math.round(e*this._viewHeight)}`,s=`0 ${-this._offsetY} ${Math.round(e*this._viewWidth)} ${Math.round(e*this._viewHeight)}`,r=`${-this._offsetX} 0 ${Math.round((this._viewWidth-40)*this._viewScale)} ${Math.round(e*this._viewHeight)}`;let n=0,a=0;if(0!==this.props.context.activeAnimations.length){const e=this.props.context.referenceMinFrame,t=this.props.context.referenceMaxFrame;n=((this.props.context.fromKey-e)/(t-e)*this._graphAbsoluteWidth+this._offsetX)/this._viewScale,a=((this.props.context.toKey-e)/(t-e)*this._graphAbsoluteWidth+this._offsetX)/this._viewScale}return(0,o.jsxs)("div",{id:"graph",onWheel:e=>this._onWheel(e),onPointerDown:e=>this._onPointerDown(e),onPointerMove:e=>this._onPointerMove(e),onPointerUp:e=>this._onPointerUp(e),children:[0!==this.props.context.activeAnimations.length&&(0,o.jsx)("div",{id:"dark-rectangle",style:{left:n+"px",width:a-n+"px"}}),(0,o.jsx)("div",{id:"block-rectangle"}),(0,o.jsx)("svg",{id:"svg-graph-grid",viewBox:s,ref:this._svgHost,children:this._buildYAxis()}),(0,o.jsx)("svg",{id:"svg-graph-horizontal",viewBox:r,children:this._buildFrameIntervalAxis()}),(0,o.jsxs)("svg",{ref:this._svgHost2,id:"svg-graph-curves",tabIndex:0,viewBox:t,children:[this._curves.map(((e,t)=>(0,o.jsx)(Do,{context:this.props.context,curve:e,convertX:e=>this._convertX(e),convertY:e=>this._convertY(e)},t))),this._curves.map((e=>this._dropKeyFrames(e)))]}),(0,o.jsx)("div",{ref:this._selectionRectangle,id:"selection-rectangle"})]})}}class _o extends s.Component{constructor(e){super(e),this._graphAbsoluteWidth=788,this._viewScale=1,this._offsetX=0,this._offsetRange=10,this._viewWidth=748,this._rangeWidthToPlayheadWidth=40,this.state={},this._playHead=s.createRef(),this._playHeadCircle=s.createRef(),this._onActiveAnimationChangedObserver=this.props.context.onActiveAnimationChanged.add((()=>{this.forceUpdate()})),this._onRangeFrameBarResizedObserver=this.props.context.onRangeFrameBarResized.add((e=>{this._viewWidth=e-this._rangeWidthToPlayheadWidth})),this._onBeforeRenderObserver=this.props.context.scene.onBeforeRenderObservable.add((()=>{if(0===this.props.context.activeAnimations.length)return;const e=this.props.context.activeAnimations[0];if(!e)return;const t=e.runtimeAnimations[0];t?this._moveHead(t.currentFrame):this._playHeadCircle.current?.innerHTML||this._moveHead(0)})),this._onMoveToFrameRequiredObserver=this.props.context.onMoveToFrameRequired.add((e=>{this.props.context.moveToFrame(e),this._moveHead(e)})),this._onGraphMovedObserver=this.props.context.onGraphMoved.add((e=>{this._offsetX=e,this.forceUpdate(),this._moveHead(this.props.context.activeFrame)})),this._onGraphScaledObserver=this.props.context.onGraphScaled.add((e=>{this._viewScale=1/e,this.forceUpdate(),this._moveHead(this.props.context.activeFrame)}))}_moveHead(e){this._playHead.current&&this._playHeadCircle.current&&void 0!==e&&(this._playHead.current.style.left=this._frameToPixel(e)+"px",this._playHeadCircle.current.innerHTML=e.toFixed(0),this.props.context.activeFrame=e,this.props.context.onPlayheadMoved.notifyObservers(e))}_frameToPixel(e){const t=this.props.context.referenceMinFrame;return((e-t)/(this.props.context.referenceMaxFrame-t)*this._graphAbsoluteWidth+this._offsetX)*this._viewScale}_pixelToFrame(e,t){const{minFrame:s,maxFrame:r,width:n,offset:o,scale:a}=t,i=this.props.context.activeAnimations[0].getKeys();return Math.max((e/a-o)/n*(r-s)+s,i[0].frame)}componentWillUnmount(){this._onBeforeRenderObserver&&(this.props.context.scene.onBeforeRenderObservable.remove(this._onBeforeRenderObserver),this._onBeforeRenderObserver=null),this._onActiveAnimationChangedObserver&&this.props.context.onActiveAnimationChanged.remove(this._onActiveAnimationChangedObserver),this._onRangeFrameBarResizedObserver&&this.props.context.onRangeFrameBarResized.remove(this._onRangeFrameBarResizedObserver),this._onMoveToFrameRequiredObserver&&this.props.context.onMoveToFrameRequired.remove(this._onMoveToFrameRequiredObserver),this._onGraphMovedObserver&&this.props.context.onGraphMoved.remove(this._onGraphMovedObserver),this._onGraphScaledObserver&&this.props.context.onGraphScaled.remove(this._onGraphScaledObserver)}_getPixelValues(e){let t,s,r,n,o;return e?(t=this.props.context.fromKey,s=this.props.context.toKey,r=this._viewWidth,n=this._offsetRange,o=1):(t=this.props.context.referenceMinFrame,s=this.props.context.referenceMaxFrame,r=this._graphAbsoluteWidth,n=this._offsetX,o=this._viewScale),{minFrame:t,maxFrame:s,width:r,offset:n,scale:o}}_onPointerDown(e,t){e.preventDefault(),this._pointerIsDown=!0,e.currentTarget.setPointerCapture(e.pointerId);const s=this._getPixelValues(t),r=this._pixelToFrame(e.nativeEvent.offsetX,s);this.props.context.moveToFrame(r),this._moveHead(r)}_onPointerMove(e,t){if(!this._pointerIsDown)return;const s=this._getPixelValues(t),r=this._pixelToFrame(e.nativeEvent.offsetX,s);this.props.context.moveToFrame(r),this._moveHead(r)}_onPointerUp(e){this._pointerIsDown=!1,e.currentTarget.releasePointerCapture(e.pointerId)}render(){return 0===this.props.context.activeAnimations.length?null:(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{id:"play-head",ref:this._playHead,children:[(0,o.jsx)("div",{id:"play-head-bar"}),(0,o.jsx)("div",{id:"play-head-circle",ref:this._playHeadCircle})]}),(0,o.jsx)("div",{id:"play-head-control",onPointerDown:e=>this._onPointerDown(e,!1),onPointerMove:e=>this._onPointerMove(e,!1),onPointerUp:e=>this._onPointerUp(e)}),(0,o.jsx)("div",{id:"play-head-control-2",onPointerDown:e=>this._onPointerDown(e,!0),onPointerMove:e=>this._onPointerMove(e,!0),onPointerUp:e=>this._onPointerUp(e)})]})}}class Ro extends s.Component{constructor(e){super(e),this._viewWidth=748,this._offsetX=10,this._isMounted=!1,this.state={},this._svgHost=s.createRef(),this.props.context.onHostWindowResized.add((()=>{this._computeSizes()})),this._onActiveAnimationChangedObserver=this.props.context.onActiveAnimationChanged.add((()=>{this._isMounted&&(this._computeSizes(),this.forceUpdate())})),this._onPlayheadMovedObserver=this.props.context.onPlayheadMoved.add((()=>{this.forceUpdate()})),this.props.context.onFrameSet.add((()=>{this._isMounted&&this.forceUpdate()})),this._onFrameManuallyEnteredObserver=this.props.context.onFrameManuallyEntered.add((()=>{this._isMounted&&this.forceUpdate()})),this.props.context.onRangeUpdated.add((()=>{this._isMounted&&this.forceUpdate()}))}componentDidMount(){this._isMounted=!0}componentWillUnmount(){this._onActiveAnimationChangedObserver&&this.props.context.onActiveAnimationChanged.remove(this._onActiveAnimationChangedObserver),this._onPlayheadMovedObserver&&this.props.context.onPlayheadMoved.remove(this._onPlayheadMovedObserver),this._onFrameManuallyEnteredObserver&&this.props.context.onFrameManuallyEntered.remove(this._onFrameManuallyEnteredObserver),this._isMounted=!1}_computeSizes(){this._svgHost.current&&(this._viewWidth=this._svgHost.current.clientWidth,this.props.context.onRangeFrameBarResized.notifyObservers(this._viewWidth),this.forceUpdate())}_dropKeyFrames(e){const t=this.props.context.fromKey,s=(this.props.context.toKey-t)/this._viewWidth;return e.getKeys().map(((e,r)=>{const n=(e.frame-t)/s;return(0,o.jsx)("line",{x1:n,y1:"0px",x2:n,y2:"40px",style:{stroke:"#ffc017",strokeWidth:.5}},"frame-line"+e.frame+r)}))}_buildActiveFrame(){if(null===this.props.context.activeFrame||void 0===this.props.context.activeFrame)return null;const e=this.props.context.fromKey,t=(this.props.context.toKey-e)/this._viewWidth,s=(this.props.context.activeFrame-e)/t;return(0,o.jsx)("line",{x1:s,y1:"0px",x2:s,y2:"40px",style:{stroke:"#ffffff",strokeWidth:.5}},"line-activeFrame")}_buildFrames(){if(0===this.props.context.activeAnimations.length)return null;const e=this.props.context.fromKey,t=this.props.context.toKey-e,s=t/this._viewWidth,r=Math.max(Math.floor(25*s),1),n=[],a=e+t;for(let t=e;t<=a;t+=r)n.push(t);return n[n.length-1]{const n=(t-e)/s;return(0,o.jsxs)("g",{children:[(0,o.jsx)("line",{x1:n,y1:"22px",x2:n,y2:"40px",style:{stroke:"#333333",strokeWidth:.5}},"line"+t+r),(0,o.jsx)("text",{x:n,y:0,dx:"6px",textAnchor:"middle",dy:"14px",style:{fontFamily:"acumin-pro-condensed",fontSize:"12px",fill:"#555555",textAlign:"center"},children:t.toFixed(0)},"label"+t+r)]},"axis"+t+r)}))}render(){const e=`${-this._offsetX} 0 ${this._viewWidth+4*this._offsetX} 40`;return(0,o.jsx)("div",{id:"range-frame-bar",children:(0,o.jsxs)("svg",{id:"svg-range-frames",viewBox:e,ref:this._svgHost,children:[this._buildFrames(),this.props.context.activeAnimations.map((e=>this._dropKeyFrames(e))),this._buildActiveFrame()]})})}}var zo=p(7159),Bo={};Bo.styleTagTransform=Gr(),Bo.setAttributes=Rr(),Bo.insert=Tr().bind(null,"head"),Bo.domAPI=Ir(),Bo.insertStyleElement=Br(),Pr()(zo.A,Bo),zo.A&&zo.A.locals&&zo.A.locals;class Uo extends s.Component{constructor(e){super(e),this.state={},this._onActiveAnimationChangedObserver=this.props.context.onActiveAnimationChanged.add((()=>{this.forceUpdate()}))}componentWillUnmount(){this._onActiveAnimationChangedObserver&&this.props.context.onActiveAnimationChanged.remove(this._onActiveAnimationChangedObserver)}render(){return(0,o.jsxs)("div",{id:"canvas-zone",children:[(0,o.jsx)(Mo,{globalState:this.props.globalState,context:this.props.context}),(0,o.jsx)(To,{globalState:this.props.globalState,context:this.props.context}),(0,o.jsx)(_o,{context:this.props.context,globalState:this.props.globalState}),(0,o.jsx)(Ro,{context:this.props.context,globalState:this.props.globalState}),this.props.context.activeAnimations.length>0&&(0,o.jsx)("div",{id:"angle-mode"})]})}}var Go=p(6967);class Fo extends s.Component{constructor(e){super(e);let t=!1;if(-1!==this.props.context.activeAnimations.indexOf(this.props.animation)&&this.props.context.activeKeyPoints)for(const e of this.props.context.activeKeyPoints)e.state.selectedState===Po.Selected&&e.props.channel===this.props.color&&(t=!0);this.state={isSelected:t},this._onActiveAnimationChangedObserver=e.context.onActiveAnimationChanged.add((()=>{this.forceUpdate()})),this._onActiveKeyPointChangedObserver=this.props.context.onActiveKeyPointChanged.add((()=>{let e=!1;if(this.props.context.activeKeyPoints)for(const t of this.props.context.activeKeyPoints)if(t.props.curve.animation===this.props.animation&&t.props.channel===this.props.color&&-1!==this.props.context.activeAnimations.indexOf(this.props.animation)){e=!0;break}this.setState({isSelected:e})}))}componentWillUnmount(){this._onActiveAnimationChangedObserver&&this.props.context.onActiveAnimationChanged.remove(this._onActiveAnimationChangedObserver),this._onActiveKeyPointChangedObserver&&this.props.context.onActiveKeyPointChanged.remove(this._onActiveKeyPointChangedObserver)}_activate(e){const t=this.props.context.activeAnimations.indexOf(this.props.animation);-1!==t&&this.props.context.getActiveChannel(this.props.animation)===this.props.color||(e.ctrlKey?-1===t&&this.props.context.activeAnimations.push(this.props.animation):(this.props.context.activeAnimations=[this.props.animation],this.props.context.resetAllActiveChannels()),this.props.context.enableChannel(this.props.animation,this.props.color),this.props.context.onActiveAnimationChanged.notifyObservers({}))}render(){const e=-1!==this.props.context.activeAnimations.indexOf(this.props.animation)&&this.props.context.isChannelEnabled(this.props.animation,this.props.color);return(0,o.jsx)(o.Fragment,{children:(0,o.jsxs)("div",{className:"animation-entry"+(e?" isActive":""),children:[this.state.isSelected&&(0,o.jsx)("div",{className:"animation-active-indicator",children:(0,o.jsx)("img",{src:Go})}),(0,o.jsx)("div",{className:"animation-name",style:{color:this.props.color},onClick:e=>this._activate(e),children:this.props.subName})]})})}}class Wo extends s.Component{constructor(e){super(e),this._unmount=!1,this.state={isExpanded:!1,isSelected:!1},this._onActiveAnimationChangedObserver=e.context.onActiveAnimationChanged.add((()=>{this._unmount||(-1===this.props.context.activeAnimations.indexOf(this.props.animation)&&this.setState({isSelected:!1}),this.forceUpdate())})),this._onActiveKeyPointChangedObserver=this.props.context.onActiveKeyPointChanged.add((()=>{this.setState({isSelected:this.props.animation.dataType===n.Animation.ANIMATIONTYPE_FLOAT&&-1!==this.props.context.activeAnimations.indexOf(this.props.animation)&&null!==this.props.context.activeKeyPoints&&this.props.context.activeKeyPoints.length>0&&this.props.context.activeKeyPoints.some((e=>e.props.curve.animation===this.props.animation))})})),this._onSelectToActivatedObserver=this.props.context.onSelectToActivated.add((e=>{const t=this.props.context.getAnimationSortIndex(this.props.animation),s=this.props.context.activeAnimations.indexOf(this.props.animation);t>e.from&&t<=e.to||t>=e.to&&t{this._unmount||this.forceUpdate()})),this.props.context.onEditAnimationRequired.notifyObservers(this.props.animation)}_onDelete(){this.props.context.onDeleteAnimation.notifyObservers(this.props.animation)}componentWillUnmount(){this._unmount=!0,this._onActiveAnimationChangedObserver&&this.props.context.onActiveAnimationChanged.remove(this._onActiveAnimationChangedObserver),this._onActiveKeyPointChangedObserver&&this.props.context.onActiveKeyPointChanged.remove(this._onActiveKeyPointChangedObserver),this._onSelectToActivatedObserver&&this.props.context.onSelectToActivated.remove(this._onSelectToActivatedObserver)}_activate(e){if(e.shiftKey){if(this.props.context.activeAnimations.length>0){const e=this.props.context.activeAnimations[0],t={from:this.props.context.getAnimationSortIndex(e),to:this.props.context.getAnimationSortIndex(this.props.animation)};this.props.context.onSelectToActivated.notifyObservers(t),this.props.context.onActiveAnimationChanged.notifyObservers({})}}else{if(e.ctrlKey){const e=this.props.context.activeAnimations.indexOf(this.props.animation);-1!==e?this.props.context.activeAnimations.splice(e,1):this.props.context.activeAnimations.push(this.props.animation)}else this.props.context.activeAnimations=[this.props.animation],this.props.context.resetAllActiveChannels();this.props.context.disableChannel(this.props.animation),this.props.context.onActiveAnimationChanged.notifyObservers({})}}_expandOrCollapse(){this.setState({isExpanded:!this.state.isExpanded})}render(){const e=-1!==this.props.context.activeAnimations.indexOf(this.props.animation);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{className:"animation-entry"+(e?" isActive":""),children:[this.state.isSelected&&(0,o.jsx)("div",{className:"animation-active-indicator",children:(0,o.jsx)("img",{src:Go})}),this.props.animation.dataType===n.Animation.ANIMATIONTYPE_FLOAT&&(0,o.jsx)("div",{className:"animation-chevron",children:(0,o.jsx)("img",{src:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEwIDEwIj48Y2lyY2xlIGN4PSI1IiBjeT0iNSIgcj0iMi44OSIgc3R5bGU9ImZpbGw6Izg4OCIvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgc3R5bGU9ImZpbGw6bm9uZSIvPjwvc3ZnPg=="})}),this.props.animation.dataType!==n.Animation.ANIMATIONTYPE_FLOAT&&(0,o.jsx)("div",{className:"animation-chevron",onClick:()=>this._expandOrCollapse(),children:(0,o.jsx)("img",{className:"animation-chevron-image"+(this.state.isExpanded?"":" collapsed"),src:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEwIDEwIj48cGF0aCBkPSJNNS40Myw3LjMxLDcuODEsMy4xOWEuNTEuNTEsMCwwLDAtLjE1LS42OC41NS41NSwwLDAsMC0uMjgtLjA3SDIuNjJhLjQ4LjQ4LDAsMCwwLS41LjQ3LjQ1LjQ1LDAsMCwwLC4wNy4yOEw0LjU3LDcuMzFhLjQ5LjQ5LDAsMCwwLC42Ni4yQS40OC40OCwwLDAsMCw1LjQzLDcuMzFaIiBzdHlsZT0iZmlsbDojODg4Ii8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBzdHlsZT0iZmlsbDpub25lIi8+PC9zdmc+"})}),(0,o.jsx)("div",{className:"animation-name",onClick:e=>this._activate(e),children:this.props.animation.name}),(0,o.jsx)(yo,{className:"animation-options",context:this.props.context,globalState:this.props.globalState,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMTAsNC4xYTYuNjIsNi42MiwwLDAsMSwxLjMzLjE2bC4zNC4zOS4xLjkyYS44NS44NSwwLDAsMCwuODMuNzUsMS4wOSwxLjA5LDAsMCwwLC40LS4wN2wuODUtLjM4LjUuMUE2LDYsMCwwLDEsMTUuNyw4LjI4bC0uMTcuNDktLjc1LjU2YS44My44MywwLDAsMC0uMTgsMS4xNi43Ny43NywwLDAsMCwuMTguMThsLjc1LjU2LjE3LjQ5QTYsNiwwLDAsMSwxNC4zLDE0bC0uNS4xLS44LS4zNWEuODUuODUsMCwwLDAtLjc2LjA1LjgzLjgzLDAsMCwwLS40MS42M2wtLjEuOTItLjM0LjM5YTUuODIsNS44MiwwLDAsMS0yLjY5LDBsLS4zMy0uMzktLjEtLjkyYS44My44MywwLDAsMC0uNDEtLjYzLjg1Ljg1LDAsMCwwLS43NiwwbC0uODUuMzdMNS43LDE0YTYsNiwwLDAsMS0xLjM1LTIuMzFsLjE3LS40OS43NS0uNTZhLjgzLjgzLDAsMCwwLC4xOC0xLjE2Ljc3Ljc3LDAsMCwwLS4xOC0uMThsLS43NS0uNTYtLjE3LS40OEE2LjA2LDYuMDYsMCwwLDEsNS43LDZsLjUtLjEuODUuMzhhLjg1Ljg1LDAsMCwwLC43NiwwLC44My44MywwLDAsMCwuNDEtLjYzbC4xLS45Mi4zNC0uMzlBNi4xOCw2LjE4LDAsMCwxLDEwLDQuMVpNMTAsNWE1LjY3LDUuNjcsMCwwLDAtLjgyLjA3bC0uMDcuNTlBMS43MywxLjczLDAsMCwxLDcuMiw3LjIxYTEuNTMsMS41MywwLDAsMS0uNTEtLjEzbC0uNTUtLjI0YTUsNSwwLDAsMC0uODEsMS40bC40OC4zNkExLjc0LDEuNzQsMCwwLDEsNi4xOCwxMWExLjg1LDEuODUsMCwwLDEtLjM3LjM3bC0uNDguMzZhNS4wNyw1LjA3LDAsMCwwLC44MSwxLjQxbC41NS0uMjRBMS43NCwxLjc0LDAsMCwxLDksMTMuOGEyLDIsMCwwLDEsLjE0LjUzbC4wNy41OWE0Ljg5LDQuODksMCwwLDAsMS42MiwwbC4wNy0uNTlhMS43NCwxLjc0LDAsMCwxLDEuOTEtMS41NSwxLjgyLDEuODIsMCwwLDEsLjUyLjE0bC41NS4yNGE1LDUsMCwwLDAsLjgxLTEuNGwtLjQ4LS4zNkExLjc0LDEuNzQsMCwwLDEsMTMuODIsOWExLjg1LDEuODUsMCwwLDEsLjM3LS4zN2wuNDgtLjM2YTUsNSwwLDAsMC0uODEtMS40bC0uNTUuMjRhMS44NiwxLjg2LDAsMCwxLS43LjE0LDEuNzQsMS43NCwwLDAsMS0xLjczLTEuNTVsLS4wNy0uNTlBNC40NSw0LjQ1LDAsMCwwLDEwLDVabTAsMi43MkEyLjI3LDIuMjcsMCwxLDEsNy43MywxMCwyLjI3LDIuMjcsMCwwLDEsMTAsNy43MmgwWm0wLC45MUExLjM2LDEuMzYsMCwxLDAsMTEuMzYsMTAsMS4zNiwxLjM2LDAsMCwwLDEwLDguNjNaIiBzdHlsZT0iZmlsbDojZmZmIi8+PC9zdmc+",onClick:()=>this._onGear()}),(0,o.jsx)(yo,{className:"animation-delete",context:this.props.context,globalState:this.props.globalState,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJVSSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjEuMTMsMjAsMjgsMjYuODcsMjYuODcsMjgsMjAsMjEuMTMsMTMuMTMsMjgsMTIsMjYuODcsMTguODcsMjAsMTIsMTMuMTMsMTMuMTMsMTIsMjAsMTguODcsMjYuODcsMTIsMjgsMTMuMTNaIi8+PC9nPjwvc3ZnPg==",onClick:()=>this._onDelete()})]}),this.state.isExpanded&&this.props.animation.dataType===n.Animation.ANIMATIONTYPE_COLOR3&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(Fo,{globalState:this.props.globalState,context:this.props.context,animation:this.props.animation,color:"#DB3E3E",subName:"Red"}),(0,o.jsx)(Fo,{globalState:this.props.globalState,context:this.props.context,animation:this.props.animation,color:"#51E22D",subName:"Green"}),(0,o.jsx)(Fo,{globalState:this.props.globalState,context:this.props.context,animation:this.props.animation,color:"#00A3FF",subName:"Blue"})]}),this.state.isExpanded&&this.props.animation.dataType===n.Animation.ANIMATIONTYPE_VECTOR3&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(Fo,{globalState:this.props.globalState,context:this.props.context,animation:this.props.animation,color:"#DB3E3E",subName:"X"}),(0,o.jsx)(Fo,{globalState:this.props.globalState,context:this.props.context,animation:this.props.animation,color:"#51E22D",subName:"Y"}),(0,o.jsx)(Fo,{globalState:this.props.globalState,context:this.props.context,animation:this.props.animation,color:"#00A3FF",subName:"Z"})]}),this.state.isExpanded&&this.props.animation.dataType===n.Animation.ANIMATIONTYPE_VECTOR2&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(Fo,{globalState:this.props.globalState,context:this.props.context,animation:this.props.animation,color:"#DB3E3E",subName:"X"}),(0,o.jsx)(Fo,{globalState:this.props.globalState,context:this.props.context,animation:this.props.animation,color:"#51E22D",subName:"Y"})]})]})}}class Ho extends s.Component{constructor(e){super(e),this.state={isVisible:!0},this._onEditAnimationRequiredObserver=this.props.context.onEditAnimationRequired.add((()=>{this.setState({isVisible:!1})})),this._onEditAnimationUIClosedObserver=this.props.context.onEditAnimationUIClosed.add((()=>{this.setState({isVisible:!0})})),this._onDeleteAnimationObserver=this.props.context.onDeleteAnimation.add((()=>{this.forceUpdate()}))}componentWillUnmount(){this._onEditAnimationRequiredObserver&&this.props.context.onEditAnimationRequired.remove(this._onEditAnimationRequiredObserver),this._onEditAnimationUIClosedObserver&&this.props.context.onEditAnimationUIClosed.remove(this._onEditAnimationUIClosedObserver),this._onDeleteAnimationObserver&&this.props.context.onDeleteAnimation.remove(this._onDeleteAnimationObserver)}render(){return this.state.isVisible?(0,o.jsx)("div",{id:"animation-list",children:this.props.context.animations?.map(((e,t)=>(0,o.jsx)(Wo,{globalState:this.props.globalState,context:this.props.context,animation:this.props.context.useTargetAnimations?e.animation:e},t)))}):null}}class Vo{static _SaveAs(e,t,s){if("download"in HTMLAnchorElement.prototype){const r=window.URL||window.webkitURL,n=s.createElement("a");return n.download=t,n.rel="noopener",n.href=r.createObjectURL(e),setTimeout((()=>{r.revokeObjectURL(n.href)}),4e4),void setTimeout((()=>{this._Click(n,s)}),0)}let r=open("","_blank");r&&(r.document.title=r.document.body.innerText="downloading...");const n="application/octet-stream"===e.type,o=/constructor/i.test(window.HTMLElement)||window.safari,a=/CriOS\/[\d]+/.test(navigator.userAgent);if((a||n&&o)&&"undefined"!=typeof FileReader){const t=new FileReader;t.onloadend=()=>{let e=t.result;e=a?e:e.replace(/^data:[^;]*;/,"data:attachment/file;"),r?r.location.href=e:location.href=e,r=null},t.readAsDataURL(e)}else{const t=window.URL||window.webkitURL,s=t.createObjectURL(e);r?r.location.href=s:location.href=s,r=null,setTimeout((function(){t.revokeObjectURL(s)}),4e4)}}static _Click(e,t){try{e.dispatchEvent(new MouseEvent("click"))}catch(s){const r=t.createEvent("MouseEvents");r.initMouseEvent("click",!0,!0,window,0,0,0,80,20,!1,!1,!1,!1,0,null),e.dispatchEvent(r)}}static DownloadAsFile(e,t,s){const r=new Blob([t],{type:"application/octet-stream"});this._SaveAs(r,s,e)}}class Yo extends s.Component{constructor(e){if(super(e),this._selectedAnimations=[],this.state={},this._root=s.createRef(),this.props.context.animations)if(this.props.context.useTargetAnimations)for(const e of this.props.context.animations)this._selectedAnimations.push(e.animation);else this._selectedAnimations=this.props.context.animations.slice(0)}_getJson(){const e={animations:[]};for(const t of this._selectedAnimations)e.animations.push(t.serialize());return JSON.stringify(e)}saveToSnippetServer(){const e=new XMLHttpRequest,t=this._root.current.ownerDocument,s=this._getJson();e.onreadystatechange=()=>{if(4==e.readyState)if(200==e.status){const s=JSON.parse(e.responseText),r=this.props.context.snippetId;this.props.context.snippetId=s.id,s.version&&"0"!=s.version&&(this.props.context.snippetId+="#"+s.version),this.forceUpdate();const n=window;n.Playground&&r&&n.Playground.onRequestCodeChangeObservable.notifyObservers({regex:new RegExp(r,"g"),replace:this.props.context.snippetId}),t.defaultView.alert("Animations saved with ID: "+this.props.context.snippetId)}else t.defaultView.alert(`Unable to save your animations. It may be too large (${(r.payload.length/1024).toFixed(2)} KB). Please try reducing the number of animations or the number of keys per animation and try again.`)},e.open("POST",n.Animation.SnippetUrl+(this.props.context.snippetId?"/"+this.props.context.snippetId:""),!0),e.setRequestHeader("Content-Type","application/json");const r={payload:JSON.stringify({animations:s}),name:"",description:"",tags:""};e.send(JSON.stringify(r))}saveToFile(){Vo.DownloadAsFile(this._root.current.ownerDocument,this._getJson(),"animations.json")}render(){return(0,o.jsxs)("div",{id:"save-animation-pane",ref:this._root,children:[(0,o.jsx)("div",{id:"save-animation-list",children:this.props.context.animations?.map(((e,t)=>{const s=this.props.context.useTargetAnimations?e.animation:e;return(0,o.jsxs)("div",{className:"save-animation-list-entry",children:[(0,o.jsx)("input",{type:"checkbox",value:s.name,defaultChecked:!0,onClick:e=>{if(e.currentTarget.checked)this._selectedAnimations.push(s);else{const e=this._selectedAnimations.indexOf(s);e>-1&&this._selectedAnimations.splice(e,1)}}}),s.name]},t)}))}),(0,o.jsxs)("div",{id:"save-animation-buttons",children:[(0,o.jsx)("button",{className:"simple-button",id:"save-snippet",type:"button",onClick:()=>{this.saveToSnippetServer()},children:"Save Snippet"}),(0,o.jsx)("button",{className:"simple-button",id:"save-file",type:"button",onClick:()=>{this.saveToFile()},children:"Save File"})]}),this.props.context.snippetId&&(0,o.jsxs)("div",{id:"save-animation-snippet",children:["Snippet ID: ",this.props.context.snippetId]})]})}}class Zo extends s.Component{constructor(e){super(e),this.state={},this._root=s.createRef(),this._textInput=s.createRef()}loadFromFile(e){const t=e.target.files;if(!t||!t.length)return;const s=t[0];n.Tools.ReadFile(s,(e=>{const t=this.props.context,s=new TextDecoder("utf-8"),r=JSON.parse(s.decode(e)).animations;t.animations=[];const o=t.animations;for(const e of r)o.push(n.Animation.Parse(e));t.stop(),t.target.animations=o,t.activeAnimations=o.length?o:[],t.prepare(),t.onAnimationsLoaded.notifyObservers(),t.onActiveAnimationChanged.notifyObservers({})}),void 0,!0),e.target.value=""}loadFromSnippetServer(){const e=this.props.context,t=this._textInput.current.value;n.Animation.ParseFromSnippetAsync(t).then((s=>{e.snippetId=t,void 0!==s.length?e.animations=s:e.animations=[s],e.stop(),e.target.animations=e.animations,e.activeAnimations=e.animations.length?e.animations:[],e.prepare(),e.onAnimationsLoaded.notifyObservers(),e.onActiveAnimationChanged.notifyObservers({})})).catch((e=>{this._root.current?.ownerDocument.defaultView.alert("Unable to load your animations: "+e)}))}render(){return(0,o.jsxs)("div",{id:"load-animation-pane",ref:this._root,children:[(0,o.jsx)("div",{id:"load-animation-snippet-id-label",children:"Snippet Id"}),(0,o.jsx)("div",{id:"load-animation-local-file-label",children:"Local File"}),(0,o.jsx)("input",{type:"text",id:"load-snippet-id",ref:this._textInput}),(0,o.jsx)("button",{className:"simple-button",id:"load-snippet",type:"button",onClick:()=>this.loadFromSnippetServer(),children:"Load"}),(0,o.jsx)("label",{htmlFor:"upload-snippet",id:"file-snippet-label",className:"simple-button",children:"Browse"}),(0,o.jsx)("input",{id:"upload-snippet",type:"file",accept:".json",onChange:e=>this.loadFromFile(e)}),this.props.context.snippetId&&(0,o.jsxs)("div",{id:"load-animation-snippet",children:["Snippet ID: ",this.props.context.snippetId]})]})}}class Jo extends s.Component{constructor(e){super(e),this.state={customPropertyMode:!1},this._root=s.createRef(),this._displayName=s.createRef(),this._property=s.createRef(),this._typeElement=s.createRef(),this._loopModeElement=s.createRef(),this._propertylement=s.createRef()}createNew(){const e=this.props.context,t=this._displayName.current.ownerDocument,s=this._displayName.current.value,r=this._property.current?this._property.current.value:this._propertylement.current.value,o=this._typeElement.current?this._typeElement.current.value:this.getInferredType(),a=this._loopModeElement.current.value;if(!s)return void t.defaultView.alert("Please define a display name");if(!r)return void t.defaultView.alert("Please define a property");const i=this.props.context.animations&&this.props.context.animations.length?this.props.context.useTargetAnimations?this.props.context.animations[0].animation.framePerSecond:this.props.context.animations[0].framePerSecond:60;let l=this.props.context.referenceMinFrame,p=this.props.context.referenceMaxFrame;if(this.props.context.animations)for(const e of this.props.context.animations){const t=this.props.context.useTargetAnimations?e.animation:e;l=Math.min(l,t.getKeys()[0].frame),p=Math.max(p,t.getKeys()[t.getKeys().length-1].frame)}let c,d,h,u,b,A,m=0,g=0;switch(o){case"Float":m=n.Animation.ANIMATIONTYPE_FLOAT,c=0,d=1,h=0,u=0,b=0,A=0;break;case"Vector2":m=n.Animation.ANIMATIONTYPE_VECTOR2,c=n.Vector2.Zero(),d=new n.Vector2(1,1),h=new n.Vector2(0,0),u=new n.Vector2(0,0),b=new n.Vector2(0,0),A=new n.Vector2(0,0);break;case"Vector3":m=n.Animation.ANIMATIONTYPE_VECTOR3,c=n.Vector3.Zero(),d=new n.Vector3(1,1,1),h=new n.Vector3(0,0,0),u=new n.Vector3(0,0,0),b=new n.Vector3(0,0,0),A=new n.Vector3(0,0,0);break;case"Quaternion":m=n.Animation.ANIMATIONTYPE_QUATERNION,c=n.Quaternion.Zero(),d=new n.Quaternion(1,1,1,0),h=new n.Quaternion(0,0,0,0),u=new n.Quaternion(0,0,0,0),b=new n.Quaternion(0,0,0,0),A=new n.Quaternion(0,0,0,0);break;case"Color3":m=n.Animation.ANIMATIONTYPE_COLOR3,c=n.Color3.Black(),d=n.Color3.White(),h=new n.Color3(0,0,0),u=new n.Color3(0,0,0),b=new n.Color3(0,0,0),A=new n.Color3(0,0,0);break;case"Color4":m=n.Animation.ANIMATIONTYPE_COLOR4,c=new n.Color4(0,0,0,0),d=new n.Color4(1,1,1,1),h=new n.Color4(0,0,0,0),u=new n.Color4(0,0,0,0),b=new n.Color4(0,0,0,0),A=new n.Color4(0,0,0,0)}switch(a){case"Cycle":g=n.Animation.ANIMATIONLOOPMODE_CYCLE;break;case"Relative":g=n.Animation.ANIMATIONLOOPMODE_RELATIVE;break;case"Relative from current":g=n.Animation.ANIMATIONLOOPMODE_RELATIVE_FROM_CURRENT;break;case"Constant":g=n.Animation.ANIMATIONLOOPMODE_CONSTANT}const C=new n.Animation(s,r,i,m,g),f=[];f.push({frame:l,value:c,inTangent:h,outTangent:u}),f.push({frame:p,value:d,inTangent:b,outTangent:A}),C.setKeys(f),e.stop(),e.animations&&0!==e.animations.length||(e.animations=[],e.target&&(e.target.animations=e.animations)),e.useTargetAnimations||e.animations.push(C),e.activeAnimations.push(C),e.prepare(),e.onActiveAnimationChanged.notifyObservers({}),e.onAnimationsLoaded.notifyObservers()}getInferredType(e=""){const t=this.props.context.target;this._propertylement.current&&(e=this._propertylement.current.value);const s=t[e];return isNaN(parseFloat(s))?s.getClassName():"Float"}render(){const e=[];let t="";if(this.props.context.target){let s=this.props.context.target;const r=s;for(;null!==s;){const t=Object.getOwnPropertyDescriptors(s);for(const s in t){const n=t[s];"_"!==s[0]&&null!==r[s]&&void 0!==r[s]&&(void 0===r[s].r&&void 0===r[s].x&&isNaN(parseFloat(r[s]))||-1===e.indexOf(s)&&(n.writable||n.set)&&e.push(s))}s=Object.getPrototypeOf(s)}e.sort();const n=["scaling","rotation","position"];for(const t of n){const s=e.indexOf(t);-1!==s&&(e.splice(s,1),e.splice(0,0,t))}t=this._propertylement.current?this.getInferredType():this.getInferredType(e[0])}const s=this.state.customPropertyMode||0===e.length;return(0,o.jsxs)("div",{id:"add-animation-pane",ref:this._root,children:[(0,o.jsx)("div",{id:"add-animation-display-name-label",children:"Display Name"}),(0,o.jsx)("div",{id:"add-animation-mode-label",children:"Mode"}),(0,o.jsx)("div",{id:"add-animation-property-label",children:"Property"}),(0,o.jsx)("div",{id:"add-animation-type-label",children:"Type"}),(0,o.jsx)("div",{id:"add-animation-loop-mode-label",children:"Loop Mode"}),(0,o.jsx)("input",{type:"text",id:"add-animation-name",ref:this._displayName,className:"input-text",defaultValue:""}),(0,o.jsx)("select",{id:"add-animation-mode",className:"option",value:this.state.customPropertyMode?"Custom":"List",onChange:e=>{this.setState({customPropertyMode:"Custom"===e.currentTarget.value})},children:["Custom","List"].map(((e,t)=>(0,o.jsx)("option",{value:e,title:e,children:e},e+t)))}),s&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("input",{type:"text",id:"add-animation-property",ref:this._property,className:"input-text",defaultValue:""}),(0,o.jsx)("select",{id:"add-animation-type",className:"option",ref:this._typeElement,children:["Float","Vector2","Vector3","Quaternion","Color3","Color4"].map(((e,t)=>(0,o.jsx)("option",{value:e,title:e,children:e},e+t)))})]}),!s&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("select",{id:"add-animation-property",className:"option",ref:this._propertylement,onClick:()=>{this.forceUpdate()},children:e.map(((e,t)=>(0,o.jsx)("option",{value:e,title:e,children:e},e+t)))}),(0,o.jsx)("div",{id:"add-animation-type",children:t})]}),(0,o.jsx)("select",{id:"add-animation-loop-mode",className:"option",ref:this._loopModeElement,children:["Cycle","Relative","Relative from current","Constant"].map(((e,t)=>(0,o.jsx)("option",{value:e,title:e,children:e},e+t)))}),(0,o.jsx)("button",{className:"simple-button",id:"add-animation",type:"button",onClick:()=>this.createNew(),children:"Create"})]})}}class Qo extends s.Component{constructor(e){super(e),this.state={isVisible:!1,animation:null},this._root=s.createRef(),this._displayName=s.createRef(),this._property=s.createRef(),this._loopModeElement=s.createRef(),this._onEditAnimationRequiredObserver=this.props.context.onEditAnimationRequired.add((e=>{this.setState({isVisible:!0,animation:e})}))}componentWillUnmount(){this._onEditAnimationRequiredObserver&&this.props.context.onEditAnimationRequired.remove(this._onEditAnimationRequiredObserver)}close(){this.setState({isVisible:!1}),this.props.context.onEditAnimationUIClosed.notifyObservers()}validate(){const e=this.props.context,t=this._displayName.current.ownerDocument,s=this._displayName.current.value,r=this._property.current.value,o=this._loopModeElement.current.value;if(!s)return void t.defaultView.alert("Please define a display name");if(!r)return void t.defaultView.alert("Please define a property");const a=this.state.animation;switch(a.name=s,a.targetProperty!==r&&(a.targetProperty=r,a.targetPropertyPath=r.split("."),e.stop()),o){case"Cycle":a.loopMode=n.Animation.ANIMATIONLOOPMODE_CYCLE;break;case"Relative":a.loopMode=n.Animation.ANIMATIONLOOPMODE_RELATIVE;break;case"Relative from current":a.loopMode=n.Animation.ANIMATIONLOOPMODE_RELATIVE_FROM_CURRENT;break;case"Constant":a.loopMode=n.Animation.ANIMATIONLOOPMODE_CONSTANT}this.close()}render(){if(!this.state.isVisible)return null;const e=["Relative","Cycle","Constant","","Yoyo","Relative from current"];return(0,o.jsxs)("div",{id:"edit-animation-pane",ref:this._root,children:[(0,o.jsx)("div",{id:"edit-animation-display-name-label",children:"Display Name"}),(0,o.jsx)("div",{id:"edit-animation-property-label",children:"Property"}),(0,o.jsx)("div",{id:"edit-animation-loop-mode-label",children:"Loop Mode"}),(0,o.jsx)("input",{type:"text",id:"edit-animation-name",ref:this._displayName,className:"input-text",defaultValue:this.state.animation.name||""}),(0,o.jsx)("input",{type:"text",id:"edit-animation-property",ref:this._property,className:"input-text",defaultValue:this.state.animation.targetProperty}),(0,o.jsx)("select",{id:"edit-animation-loop-mode",className:"option",ref:this._loopModeElement,defaultValue:e[this.state.animation.loopMode??1],children:e.filter((e=>""!==e)).map(((e,t)=>(0,o.jsx)("option",{value:e,title:e,children:e},e+t)))}),(0,o.jsxs)("div",{id:"edit-animation",children:[(0,o.jsx)("button",{className:"simple-button",id:"edit-animation-ok",type:"button",onClick:()=>this.validate(),children:"OK"}),(0,o.jsx)("button",{className:"simple-button",id:"edit-animation-cancel",type:"button",onClick:()=>this.close(),children:"Cancel"})]})]})}}var Ko,Xo=p(9465),qo={};qo.styleTagTransform=Gr(),qo.setAttributes=Rr(),qo.insert=Tr().bind(null,"head"),qo.domAPI=Ir(),qo.insertStyleElement=Br(),Pr()(Xo.A,qo),Xo.A&&Xo.A.locals&&Xo.A.locals,function(e){e[e.Edit=0]="Edit",e[e.Add=1]="Add",e[e.Load=2]="Load",e[e.Save=3]="Save"}(Ko||(Ko={}));class $o extends s.Component{constructor(e){super(e),this.state={mode:Ko.Edit},this.props.context.onDeleteAnimation.add((e=>{const t=this.props.context.activeAnimations.indexOf(e);-1!==t&&(this.props.context.activeAnimations.splice(t,1),this.props.context.onActiveAnimationChanged.notifyObservers({}));let s=-1;if(this.props.context.useTargetAnimations){const t=this.props.context.animations;for(let r=0;r-1&&(this.props.context.animations.splice(s,1),this.forceUpdate())})),this.props.context.onAnimationsLoaded.add((()=>this.setState({mode:Ko.Edit})))}_onAddAnimation(){this.state.mode!==Ko.Add&&this.setState({mode:Ko.Add})}_onLoadAnimation(){this.state.mode!==Ko.Load&&this.setState({mode:Ko.Load})}_onSaveAnimation(){this.state.mode!==Ko.Save&&this.setState({mode:Ko.Save})}_onEditAnimation(){this.state.mode!==Ko.Edit&&this.setState({mode:Ko.Edit})}render(){let e="60";return this.props.context.animations&&this.props.context.animations.length&&(e=this.props.context.useTargetAnimations?this.props.context.animations[0].animation.framePerSecond.toString():this.props.context.animations[0].framePerSecond.toString()),(0,o.jsxs)("div",{id:"sideBar",children:[(0,o.jsxs)("div",{id:"menu-bar",className:this.props.context.useTargetAnimations?"small":"",children:[!this.props.context.useTargetAnimations&&(0,o.jsx)(yo,{tooltip:"Add new animation",isActive:this.state.mode===Ko.Add,id:"add-animation",globalState:this.props.globalState,context:this.props.context,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj48cmVjdCB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMTUsOC4yN2EuNTguNTgsMCwwLDEsLjU3LjV2NS42NWg1LjU3YS41OC41OCwwLDAsMSwuMDgsMS4xNUgxNS41OHY1LjU3YS41OC41OCwwLDAsMS0xLjE1LjA4VjE1LjU4SDguODVhLjU4LjU4LDAsMCwxLS4wOC0xLjE1aDUuNjVWOC44NUEuNTguNTgsMCwwLDEsMTUsOC4yN1oiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4=",onClick:()=>this._onAddAnimation()}),!this.props.context.useTargetAnimations&&(0,o.jsx)(yo,{tooltip:"Load animations",isActive:this.state.mode===Ko.Load,id:"load-animation",globalState:this.props.globalState,context:this.props.context,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj48cmVjdCB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMjAuMDYsOC4zOGEuNTkuNTksMCwwLDAsLjY2LS41MS41OS41OSwwLDAsMC0uNTEtLjY2SDkuOTNhLjU5LjU5LDAsMCwwLS41MS42Ni41Ny41NywwLDAsMCwuNTEuNTFaTTE0LjkyLDIyLjc5SDE1YS41OS41OSwwLDAsMCwuNTgtLjVWMTEuNTVsMi45LDIuODlhLjU4LjU4LDAsMCwwLC43Ni4wNmwuMDctLjA2YS41OS41OSwwLDAsMCwuMDUtLjc2bC0uMDUtLjA2LTMuOS0zLjg5YS41OC41OCwwLDAsMC0uNzYtLjA2bC0uMDYuMDUtMy45LDMuOWEuNTguNTgsMCwwLDAsMCwuODFoMGEuNTguNTgsMCwwLDAsLjc2LjA2bC4wNy0uMDYsMi44OS0yLjg5VjIyLjIxQS41OS41OSwwLDAsMCwxNC45MiwyMi43OVoiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4=",onClick:()=>this._onLoadAnimation()}),(0,o.jsx)(yo,{tooltip:"save current animations",isActive:this.state.mode===Ko.Save,id:"save-animation",globalState:this.props.globalState,context:this.props.context,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj48cmVjdCB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNOCwxMC4xNkEyLjEzLDIuMTMsMCwwLDEsMTAuMSw4aDcuNzhhMi41MSwyLjUxLDAsMCwxLDEuNzguNzNsMS41OCwxLjU4QTIuNTMsMi41MywwLDAsMSwyMiwxMi4xMnY3LjczQTIuMTMsMi4xMywwLDAsMSwxOS44OSwyMkgxMC4xNUEyLjE0LDIuMTQsMCwwLDEsOCwxOS44N1YxMC4xNlptMi4xMy0xYTEsMSwwLDAsMC0xLDF2OS42OWExLDEsMCwwLDAsMSwxaC4ydi00LjFBMS43NCwxLjc0LDAsMCwxLDEyLjA2LDE1aDUuODVhMS43NCwxLjc0LDAsMCwxLDEuNzQsMS43NGgwdjQuMDdoLjE5YTEsMSwwLDAsMCwxLTF2LTcuN2ExLjM4LDEuMzgsMCwwLDAtLjQtMWwtMS42LTEuNTNhMS4yNiwxLjI2LDAsMCwwLS43NC0uMzh2Mi4xMWExLjc0LDEuNzQsMCwwLDEtMS43NCwxLjc0SDEyLjg3YTEuNzMsMS43MywwLDAsMS0xLjc1LTEuNzNoMFY5LjE5Wm04LjM0LDExLjYzdi00YS41OS41OSwwLDAsMC0uNTctLjU5SDEyLjA5YS41OC41OCwwLDAsMC0uNTguNThoMHY0LjA3Wk0xMi4yOSw5LjE5djIuMTNhLjU4LjU4LDAsMCwwLC41OC41OGgzLjQ4YS41OC41OCwwLDAsMCwuNTktLjU3aDBWOS4xOVoiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4=",onClick:()=>this._onSaveAnimation()}),(0,o.jsx)(yo,{tooltip:"Edit animations",isActive:this.state.mode===Ko.Edit,id:"edit-animation",globalState:this.props.globalState,context:this.props.context,icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj48cmVjdCB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBkPSJNMjIsOEEyLjc5LDIuNzksMCwwLDEsMjIsMTJoMGwtOS4zMyw5LjMzYTEuNzYsMS43NiwwLDAsMS0uNzguNDVsLTQsMS4wOWEuNTguNTgsMCwwLDEtLjcyLS4zOS42Mi42MiwwLDAsMSwwLS4zM2wxLjA5LTRhMS43NiwxLjc2LDAsMCwxLC40NS0uNzhMMTguMDYsOEEyLjgsMi44LDAsMCwxLDIyLDhabS00LjcsMi40MUw5LjU2LDE4LjE1YS40Ni40NiwwLDAsMC0uMTUuMjZsLS44MiwzLDMtLjgyYS40Ni40NiwwLDAsMCwuMjYtLjE1bDcuNzUtNy43NVptMS41OC0xLjU4LS43NS43NSwyLjI5LDIuMjkuNzUtLjc1YTEuNjIsMS42MiwwLDAsMC0yLjI5LTIuMjlaIiBzdHlsZT0iZmlsbDojZmZmIi8+PC9zdmc+",onClick:()=>this._onEditAnimation()}),(0,o.jsx)(ho,{value:e,complement:" fps",isNumber:!0,onValueAsNumberChanged:e=>{this.props.context.animations?.forEach((t=>{this.props.context.useTargetAnimations?t.animation.framePerSecond=e:t.framePerSecond=e}))},tooltip:"Framerate",id:"framerate-animation",globalState:this.props.globalState,context:this.props.context})]}),this.state.mode===Ko.Edit&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(Ho,{globalState:this.props.globalState,context:this.props.context}),(0,o.jsx)(Qo,{globalState:this.props.globalState,context:this.props.context})]}),this.state.mode===Ko.Save&&(0,o.jsx)(Yo,{globalState:this.props.globalState,context:this.props.context}),this.state.mode===Ko.Load&&(0,o.jsx)(Zo,{globalState:this.props.globalState,context:this.props.context}),this.state.mode===Ko.Add&&(0,o.jsx)(Jo,{globalState:this.props.globalState,context:this.props.context})]})}}var ea=p(2667),ta={};ta.styleTagTransform=Gr(),ta.setAttributes=Rr(),ta.insert=Tr().bind(null,"head"),ta.domAPI=Ir(),ta.insertStyleElement=Br(),Pr()(ea.A,ta),ea.A&&ea.A.locals&&ea.A.locals;class sa extends s.Component{constructor(e){super(e),this.state={isOpen:!1}}onCloseAnimationCurveEditor(e){null!==e&&e.close(),this.setState({isOpen:!1}),this.props.context.activeAnimations=[],this.props.context.onActiveAnimationChanged.notifyObservers({})}shouldComponentUpdate(e,t){return t.isOpen!==this.state.isOpen&&(t.isOpen&&(this.props.context.prepare(),this.props.context.animations&&this.props.context.animations.length&&setTimeout((()=>{this.props.context.activeAnimations.push(this.props.context.useTargetAnimations?this.props.context.animations[0].animation:this.props.context.animations[0]),this.props.context.onActiveAnimationChanged.notifyObservers({})}))),!0)}_onKeyDown(e){switch(e.key){case"Delete":case"Backspace":this.props.context.activeKeyPoints?.length&&!this.props.context.focusedInput&&this.props.context.onDeleteKeyActiveKeyPoints.notifyObservers();break;case" ":this.props.context.isPlaying?this.props.context.stop():this.props.context.play(!0);break;case"a":e.ctrlKey&&(this.props.context.onSelectAllKeys.notifyObservers(),this.props.context.onActiveKeyPointChanged.notifyObservers(),e.preventDefault());break;case"ArrowLeft":this.props.context.focusedInput||this.props.context.onMoveToFrameRequired.notifyObservers(Math.max(0,this.props.context.activeFrame-1));break;case"ArrowRight":this.props.context.focusedInput||this.props.context.onMoveToFrameRequired.notifyObservers(Math.min(this.props.context.clipLength,this.props.context.activeFrame+1));break;case"ArrowDown":{const e=this.props.context.getPrevKey();null!==e&&this.props.context.onMoveToFrameRequired.notifyObservers(e);break}case"ArrowUp":{const e=this.props.context.getNextKey();null!==e&&this.props.context.onMoveToFrameRequired.notifyObservers(e)}}}render(){return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(Mr,{label:"Edit",onClick:()=>{this.setState({isOpen:!0})}}),this.state.isOpen&&(0,o.jsx)(co,{id:"curve-editor",title:"Animation Curve Editor",size:{width:1024,height:512},onResize:()=>this.props.context.onHostWindowResized.notifyObservers(),onClose:e=>this.onCloseAnimationCurveEditor(e),onKeyDown:e=>this._onKeyDown(e),children:(0,o.jsxs)("div",{id:"curve-editor",children:[(0,o.jsx)(So,{globalState:this.props.globalState,context:this.props.context}),(0,o.jsx)($o,{globalState:this.props.globalState,context:this.props.context}),(0,o.jsx)(Uo,{globalState:this.props.globalState,context:this.props.context}),(0,o.jsx)(xo,{globalState:this.props.globalState,context:this.props.context})]})})]})}}class ra{constructor(){this.activeAnimations=[],this.activeChannels={},this.useExistingPlayRange=!1,this.forwardAnimation=!0,this.referenceMinFrame=0,this.referenceMaxFrame=100,this.focusedInput=!1,this.onActiveAnimationChanged=new n.Observable,this.onActiveKeyPointChanged=new n.Observable,this.onHostWindowResized=new n.Observable,this.onSelectAllKeys=new n.Observable,this.onActiveKeyFrameChanged=new n.Observable,this.onFrameSet=new n.Observable,this.onFrameManuallyEntered=new n.Observable,this.onMainKeyPointSet=new n.Observable,this.onMainKeyPointMoved=new n.Observable,this.onValueSet=new n.Observable,this.onValueManuallyEntered=new n.Observable,this.onFrameRequired=new n.Observable,this.onCreateOrUpdateKeyPointRequired=new n.Observable,this.onFlattenTangentRequired=new n.Observable,this.onLinearTangentRequired=new n.Observable,this.onBreakTangentRequired=new n.Observable,this.onUnifyTangentRequired=new n.Observable,this.onStepTangentRequired=new n.Observable,this.onDeleteAnimation=new n.Observable,this.onGraphMoved=new n.Observable,this.onGraphScaled=new n.Observable,this.onRangeUpdated=new n.Observable,this.onMoveToFrameRequired=new n.Observable,this.onAnimationStateChanged=new n.Observable,this.onDeleteKeyActiveKeyPoints=new n.Observable,this.onSelectionRectangleMoved=new n.Observable,this.onAnimationsLoaded=new n.Observable,this.onEditAnimationRequired=new n.Observable,this.onEditAnimationUIClosed=new n.Observable,this.onClipLengthIncreased=new n.Observable,this.onClipLengthDecreased=new n.Observable,this.onInterpolationModeSet=new n.Observable,this.onSelectToActivated=new n.Observable,this.onRangeFrameBarResized=new n.Observable,this.onPlayheadMoved=new n.Observable,this.lockLastFrameValue=!1,this.lockLastFrameFrame=!1,this.onActiveKeyDataChanged=new n.Observable}prepare(){if(this.isPlaying=!1,!this.animations||!this.animations.length)return;const e=this.useTargetAnimations?this.animations[0].animation:this.animations[0],t=e.getKeys();this.referenceMinFrame=0,this.referenceMaxFrame=t[t.length-1].frame,this.useExistingPlayRange||(this.fromKey=this.referenceMinFrame,this.toKey=this.referenceMaxFrame),this.snippetId=e.snippetId,this.clipLength=this.referenceMaxFrame,e&&e.hasRunningRuntimeAnimations&&(this.isPlaying=!0)}play(e){let t;this.isPlaying=!0,this.scene.stopAnimation(this.target),e?this.rootAnimationGroup?this.rootAnimationGroup.start(!0,1,this.fromKey,this.toKey):t=this.scene.beginAnimation(this.target,this.fromKey,this.toKey,!0):this.rootAnimationGroup?this.rootAnimationGroup.start(!0,1,this.toKey,this.fromKey):t=this.scene.beginAnimation(this.target,this.toKey,this.fromKey,!0),this.forwardAnimation=e,this.rootAnimationGroup?this.rootAnimationGroup.goToFrame(this.activeFrame):t.goToFrame(this.activeFrame),this.onAnimationStateChanged.notifyObservers()}stop(){this.isPlaying=!1,this.rootAnimationGroup?this.rootAnimationGroup.stop():this.scene.stopAnimation(this.target),this.onAnimationStateChanged.notifyObservers()}moveToFrame(e){if(this.animations&&this.animations.length){this.activeFrame=e,this.isPlaying||(this.rootAnimationGroup?this.rootAnimationGroup.start(!1,1,this.fromKey,this.toKey):this.scene.beginAnimation(this.target,this.fromKey,this.toKey,!1));for(const t of this.animations){const s=this.useTargetAnimations?t.animation:t;if(!s.hasRunningRuntimeAnimations)return;for(const t of s.runtimeAnimations)t.goToFrame(e)}this.stop()}}refreshTarget(){this.animations&&this.animations.length&&(this.isPlaying||this.moveToFrame(this.activeFrame))}clearSelection(){this.activeKeyPoints=[],this.onActiveKeyPointChanged.notifyObservers()}enableChannel(e,t){this.activeChannels[e.uniqueId]=t}disableChannel(e){delete this.activeChannels[e.uniqueId]}isChannelEnabled(e,t){return void 0===this.activeChannels[e.uniqueId]||this.activeChannels[e.uniqueId]===t}getActiveChannel(e){return this.activeChannels[e.uniqueId]}resetAllActiveChannels(){this.clearSelection(),this.activeChannels={}}getAnimationSortIndex(e){if(!this.animations)return-1;for(let t=0;te&&(e=t.frame)}return e===-Number.MAX_VALUE&&(e=this.fromKey),e}getNextKey(){if(!this.animations||!this.animations.length)return null;let e=Number.MAX_VALUE;for(const t of this.activeAnimations){const s=t.getKeys();for(const t of s)t.frame>this.activeFrame&&t.framee.props.curve.animation.dataType)),t=e?.filter((e=>e===n.Animation.ANIMATIONTYPE_QUATERNION));return(t?.length||0)>0}}class na extends s.Component{constructor(e){super(e),this._animations=null,this._isPlaying=!1,this._animationControl={from:0,to:0,loop:!1,initialized:!1},this.state={currentFrame:0};const t=this.props.animatable;if(this._ranges=t.getAnimationRanges?t.getAnimationRanges():[],t.getAnimatables){const e=t.getAnimatables();this._animations=new Array,e.forEach((e=>{e.animations&&this._animations.push(...e.animations)})),t.animations&&this._animations.push(...t.animations),this._animations&&this._animations.length&&this._animations.forEach((e=>{const t=e.getKeys();if(t&&t.length>0){t[0].framethis._animationControl.to&&(this._animationControl.to=t[e].frame)}}))}this._timelineRef=s.createRef()}playOrPause(){const e=this.props.animatable;this._isPlaying=this.props.scene.getAllAnimatablesByTarget(e).length>0,this._isPlaying?(this.props.scene.stopAnimation(this.props.animatable),this._mainAnimatable=null):this._mainAnimatable=this.props.scene.beginAnimation(this.props.animatable,this._animationControl.from,this._animationControl.to,this._animationControl.loop),this.forceUpdate()}componentDidMount(){this._onBeforeRenderObserver=this.props.scene.onBeforeRenderObservable.add((()=>{this._isPlaying&&this._mainAnimatable&&this.setState({currentFrame:this._mainAnimatable.masterFrame})}))}componentWillUnmount(){this._onBeforeRenderObserver&&(this.props.scene.onBeforeRenderObservable.remove(this._onBeforeRenderObserver),this._onBeforeRenderObserver=null)}onCurrentFrameChange(e){this._mainAnimatable&&(this._mainAnimatable.goToFrame(e),this.setState({currentFrame:e}))}onChangeFromOrTo(){this.playOrPause(),this._isPlaying&&this.playOrPause()}componentDidUpdate(e){e.animatable.uniqueId!==this.props.animatable.uniqueId&&(this._animationCurveEditorContext=null)}render(){const e=this.props.animatable,t=this.props.animatable,s=this.props.scene.getAllAnimatablesByTarget(e);this._isPlaying=s.length>0,this._isPlaying&&(this._mainAnimatable=s[0],this._mainAnimatable&&(this._animationControl.from=this._mainAnimatable.fromFrame,this._animationControl.to=this._mainAnimatable.toFrame,this._animationControl.loop=this._mainAnimatable.loopAnimation,this._animationControl.initialized=!0));const r=e.animations;return this._animationCurveEditorContext||(this._animationCurveEditorContext=new ra,this._animationCurveEditorContext.title=this.props.animatable.name||"",this._animationCurveEditorContext.animations=r,this._animationCurveEditorContext.target=this.props.animatable,this._animationCurveEditorContext.scene=this.props.scene,this._animationCurveEditorContext.fromKey=this._animationControl.from,this._animationCurveEditorContext.toKey=this._animationControl.to,this._animationCurveEditorContext.useExistingPlayRange=this._animationControl.initialized),(0,o.jsxs)(o.Fragment,{children:[this._ranges.length>0&&(0,o.jsx)(Or,{title:"ANIMATION RANGES",selection:this.props.globalState,children:this._ranges.map(((t,s)=>(0,o.jsx)(Mr,{label:t.name,onClick:()=>{this._mainAnimatable=null,this.props.scene.beginAnimation(e,t.from,t.to,!0)}},t.name+s)))}),r&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(Or,{title:"ANIMATIONS",selection:this.props.globalState,children:[(0,o.jsx)(yr,{label:"Count",value:r.length.toString()}),r.map(((e,t)=>(0,o.jsx)(yr,{label:"#"+t+" >",value:e.targetProperty},e.targetProperty+t))),(0,o.jsx)(sa,{globalState:this.props.globalState,context:this._animationCurveEditorContext})]}),r.length>0&&(0,o.jsxs)(Or,{title:"ANIMATION GENERAL CONTROL",selection:this.props.globalState,children:[(0,o.jsx)(Kn,{lockObject:this.props.lockObject,isInteger:!0,label:"From",target:this._animationControl,propertyName:"from",onChange:()=>this.onChangeFromOrTo()}),(0,o.jsx)(Kn,{lockObject:this.props.lockObject,isInteger:!0,label:"To",target:this._animationControl,propertyName:"to",onChange:()=>this.onChangeFromOrTo()}),(0,o.jsx)(en,{label:"Loop",onSelect:e=>{this._animationControl.loop=e,s.forEach((t=>{t.loopAnimation=e}))},isSelected:()=>this._animationControl.loop}),this._isPlaying&&(0,o.jsx)(Xn,{lockObject:this.props.lockObject,ref:this._timelineRef,label:"Current frame",minimum:this._animationControl.from,maximum:this._animationControl.to,step:(this._animationControl.to-this._animationControl.from)/1e3,directValue:this.state.currentFrame,onInput:e=>this.onCurrentFrameChange(e)}),(0,o.jsx)(Mr,{label:this._isPlaying?"Stop":"Play",onClick:()=>this.playOrPause()}),(this._ranges.length>0||this._animations&&this._animations.length>0)&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(en,{label:"Enable override",onSelect:e=>{e?(t.animationPropertiesOverride=new n.AnimationPropertiesOverride,t.animationPropertiesOverride.blendingSpeed=.05):t.animationPropertiesOverride=null,this.forceUpdate()},isSelected:()=>null!=t.animationPropertiesOverride,onValueChanged:()=>this.forceUpdate()}),null!=t.animationPropertiesOverride&&(0,o.jsxs)("div",{children:[(0,o.jsx)(en,{label:"Enable blending",target:t.animationPropertiesOverride,propertyName:"enableBlending",onPropertyChangedObservable:this.props.onPropertyChangedObservable}),(0,o.jsx)(Xn,{lockObject:this.props.lockObject,label:"Blending speed",target:t.animationPropertiesOverride,propertyName:"blendingSpeed",minimum:0,maximum:.1,step:.01,onPropertyChangedObservable:this.props.onPropertyChangedObservable})]})]})]})]})]})}}class oa extends s.Component{constructor(e){super(e),this._localChange=!1,this._propertyChange=!0;const t=this.props.target[this.props.propertyName];this.state={value:t?this.props.isInteger?t.toFixed(0):t.toFixed(this.props.digits||3):"0"},this._store=t}componentWillUnmount(){this.unlock()}shouldComponentUpdate(e,t){if(this._localChange)return this._localChange=!1,!0;const s=e.target[e.propertyName],r=s?this.props.isInteger?s.toFixed(0):s.toFixed(this.props.digits||3):"0";return r!==t.value&&(t.value=r,!0)}raiseOnPropertyChanged(e,t){this.props.onChange&&this.props.onChange(e),this.props.onPropertyChangedObservable&&this.props.onPropertyChangedObservable.notifyObservers({object:this.props.replaySourceReplacement??this.props.target,property:this.props.propertyName,value:e,initialValue:t})}convertToHexString(e){for(;e.length<10;)e+="0";return e}updateValue(e,t){"0x"!=e.substring(0,2)&&(e="0"!=e.substring(0,1)?"0x"+e:"0x"+e.substr(1));const s=e.substr(2);if(""!=s&&0==/^[0-9A-Fa-f]+$/g.test(s))return;if(e.length>10)return;const r=this.convertToHexString(e);let n;n=parseInt(r),isNaN(n)||void 0===this.props.min||n