@tomorrowevening/hermes
Version:
An extendable set of Web Tools controlled via a separate window for non-intereference with content.
2 lines (1 loc) • 33.3 kB
JavaScript
;const o=require("react/jsx-runtime"),C=require("react"),a=require("three/webgpu"),S=require("three"),y=require("three/examples/jsm/helpers/RectAreaLightHelper.js"),R=require("three/examples/jsm/controls/OrbitControls.js"),p=require("three/src/math/MathUtils.js"),g=require("camera-controls"),c=require("../../core/remote/RemoteThree.cjs"),d=require("./CameraWindow.cjs"),E=require("./InfiniteGridHelper.cjs"),M=require("./InfiniteGridHelperGPU.cjs");;/* empty css */const b=require("../sidePanel/DebugData.cjs"),T=require("../sidePanel/inspector/utils/InspectTransform.cjs"),w=require("./Toggle.cjs"),V=require("./DepthNodeMaterial.cjs"),H=require("./UVNodeMaterial.cjs"),x=require("../tools/splineEditor/index.cjs"),u=require("../tools/Transform.cjs"),W=require("../../utils/math.cjs"),v=require("../../utils/three.cjs"),I=["Single","Side by Side","Stacked","Quad"],L="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC60lEQVRYhe2YT4hNcRTHP48xpmYaNAvRyEQxEhnKQljYsRm9/EmSyJiMFAsMZWNhJYoNIUVJ2VGiyb9ZzIpMpkQSahbGv9GMYWrM+1rc2zjvzvvdd+99rzdvMd+6de75nd+5387vnN/v/G5KEuWMKRNNIB8mCRaKiiL5qQb2ApuBuUAV0Ad0AJeB3sSeJRX6LJbULTf6JTUn9Z+KWMUpPyp/Avoa4CNQZ3Sj/lNpdL/xottR7AjOkHRUUpekN5I6JbVLavDH75lIfZN0UFKTpCWS0pJem/HeJBEMG6yV1ONYtgFJbZJ+GF1jDh+zJb03NuliEuwMkMo4yErS2RA/LcbuYVyCrm1mA7Dal/8Cu4FG4JD/HsTTkCy6a+SVMTPQuc1sBKb78nHghi+/A+YBxwL2lbhRY+ThuARdEVxu5JdGFvACr0otdoZ8Y4+Rn0Sn5sFFsMvI6YB9MzA1YJ8mN8k1wAHzfj4uQVdyrpI0aJL7oqTtkq4FiqPLyCOSbktqlbRL0jlJQ2b8QdwCUZ4qvhRStZL0XFK1pMd57CRvq5mfhKBriRfiFUMY6oD7eOdwPlQAN4G10dfWg+uouwXsiOssAj4AC+JMcEWwvnAuOTEr7gTXPmg34zagOwkbIIOXAo9CbDYBrcBXYN+4UUdy2sRflyS5zVNlfPX7ugpJW5V9nI7mmh+lYU0lCZ2B3TOnAVuAk0BTwC5nuhWro46KauBOQJch5OpRaoIW34GreGf+YZdRqS9NAj4Bp4ClQDvwOWxCqSM4ADQEdKE5XvbXzlITrAVe4TW+M6NMKDXBFLAMuAD0ACfIc7pMZBXXA2cY3/xmodQRHAL2A2+NLtj8ZiEKwUL/z2WMPAJcAVYALWSf8dZuDFGWeBHwKxm3sWYhiGG8Tfo6sA2vSfiSy4GrH3wGrDcfKSSKKf6v1E9yF0XK9Q1XBPuMXMw8HXTonQFwETwNzMFr64v1jzgFHIk9ybHEZYPJo65QlD3Bf2/Q/eaHPiSWAAAAAElFTkSuQmCC",O="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAETklEQVRYhe2YXYhVVRTHf3d0/JhyUrMpFbImM+whSa3Mynww+4AeIgiKoozooQ+KyMyXIAujF6OXqHyI6iEKKYgIP/owsjSFqCkprdDUTEcjbWZ0HHV+Pex1ucfb9Z57Z9REXHA4Z++99l7/s/ZZ/7X2KaiczNLwfwPIk9MA+yunNMAG4DHgV+BvoB3YFff2TPstYEyfrajVroI6Sr1GvahsbJC63HzZq04pmztSvU5tVRuqYRiYg78JeBR4HPg5ntdmxovz9wJfA3uAxuibDLQCA+IqynnAQuBuYCnwMLC1rx48U12U8cZqdWqMDcx4cI16qTpYbVKHqa+ovWUeHKsujn7VL9ULq2HI+wY7gVeBJdGeFu3J4ZUiy/cAXeHRRuAQsC/GC0B3eG4BcH/0tUV7czUAeVsMsBF4Kha9HZgCvAncAuwPnXHA0wFuGLANuDrGuoGDwFxgTqzzQ7RX5FrP2eLsdb76vnogtme6+nE8H1YPlQXHwbi3q9eqn0e7Tb25VrsF68vFY0lb1AGcDTwItGQ8tQM4AIwGmqP/EPAu8A0wElgJfFGzxTo8mKWXu9Rd4ZF96jvqjSbauEC9Sn1O3R463epLaku99voCsFXdkAH3kNpcQW+IiT/bQne3eufxBtioPqP2mKhioXpWzpxb1T8C5Ifh4ZptVoriRmAIKdrI3Lujf3bobAPeJpF0NVkKrAFuI9HTOBIxnxFrF4OgQKKr/dnJlQA+AcwABgOHA4zAamA5cE7orQL+zAEHiWI+A2bFC7aSguheYCgpqAphZz3wSB7AecCICv2TgH8oFRib4gVqka0k0h8CXAxMBW6ooDejFoCvA9OBQUAvKWM0kDz4XUZvNKXtyZMWUl7vBbaQXq457PeEziDgx/KJlQAuIPFdMcEXv5OdYWBP9M8k8VpnDQCvB4aTSrCNJB5cSdrW3tBpIJVnR0qdUTxAfdGUOVTnmwqEanNmqltC/9OgqePKg5eom8PgdvW+oJ9Kupera0O3U50TL3lcAaI+oHaF4R3qa6Z822wq0Saq89T1lmSxOrxeW/Xm4uGkiqQDmECKuKHxHW0HdpMiewSpvGqKeR8Ay0iBsYIjg6261PE2o9Q3Yqv+MqWxO9R1Hl12qs+q49Vlppy82pSr+5xJKsko4AXgHlJ0t5NIeg3wLXAlqZhtIUV8J6nmWwX8QiLjdhL5TwMWkY4R6/rrwYKlMr1Y321QZ/vfwBijPqm+rF4Wc7PjE9QllurGVeoV5gRNHsAm9fnMom3qrKPoTjKdMXaYyrFygEWQ72XWW24qhPu8xcUc2UU6O8wFPjmK7jhgPHAuMJGUGQ6U6WwE5sfzTXGvei7KA9hFOiR9D/wOfFVFt4dS2tpfRe83Ur7/CPiJakfOGgBCypubatArl2r8VfOax/LfzABKtePAzHO/5FgC7KBEzB2kOrDfUm8mOeFySv9+OyFyGmB/5aQH+C9BVKmVCNuMZgAAAABJRU5ErkJggg==",k="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAQ0lEQVQ4jWP8////fwYqAxYozUhFM/8zkaKYWIWkGEq0b0ZdSjQY5i79TyWagRGaTUdzFEEw6lLqGzqwLoVVJ1StpwA9sBwbUqAh5gAAAABJRU5ErkJggg==";class A extends C.Component{static instance=null;scene;renderer;currentScene;scenes=new Map;cameras=new Map;controls=new Map;currentCamera;currentWindow;helpersContainer=new a.Group;grid;cameraHelpers=new Map;lightHelpers=new Map;interactionHelper=new a.AxesHelper(25);currentTransform;splineEditor;depthMaterial;normalsMaterial;uvMaterial;wireframeMaterial=new a.MeshBasicMaterial({opacity:.33,transparent:!0,wireframe:!0});playing=!1;rafID=-1;cameraControlsRafID=-1;width=0;height=0;tlCam=null;trCam=null;blCam=null;brCam=null;tlRender="Renderer";trRender="Renderer";blRender="Renderer";brRender="Renderer";cameraVisibility=!0;lightVisibility=!0;gridVisibility=!0;rendererReady=!1;selectedItem=void 0;cameraControlsStartTime=0;cameraControlsLastTime=0;debugCamera;raycaster=new a.Raycaster;pointer=new a.Vector2;cameraControls=void 0;canvasRef;containerRef;tlWindow;trWindow;blWindow;brWindow;editorCameras=["Top","Bottom","Left","Right","Front","Back","Orthographic","UI","Debug"];constructor(i){super(i),this.props.three.addEventListener(c.ToolEvents.ADD_RENDERER,this.setupRenderer),this.scene=new a.Scene,this.scene.name=this.scene.uuid="",this.canvasRef=C.createRef(),this.containerRef=C.createRef(),this.tlWindow=C.createRef(),this.trWindow=C.createRef(),this.blWindow=C.createRef(),this.brWindow=C.createRef();const e=i.three.name,t=localStorage,s=t.getItem(`${e}_mode`);this.state={mode:s!==null?s:"Single",modeOpen:!1,renderModeOpen:!1,interactionMode:"Orbit",interactionModeOpen:!1,lastUpdate:Date.now()},t.setItem(`${e}_mode`,this.state.mode),t.setItem(`${e}_tlCam`,t.getItem(`${e}_tlCam`)!==null?t.getItem(`${e}_tlCam`):"Debug"),t.setItem(`${e}_trCam`,t.getItem(`${e}_trCam`)!==null?t.getItem(`${e}_trCam`):"Orthographic"),t.setItem(`${e}_blCam`,t.getItem(`${e}_blCam`)!==null?t.getItem(`${e}_blCam`):"Front"),t.setItem(`${e}_brCam`,t.getItem(`${e}_brCam`)!==null?t.getItem(`${e}_brCam`):"Top"),t.setItem(`${e}_tlRender`,t.getItem(`${e}_tlRender`)!==null?t.getItem(`${e}_tlRender`):"Renderer"),t.setItem(`${e}_trRender`,t.getItem(`${e}_trRender`)!==null?t.getItem(`${e}_trRender`):"Renderer"),t.setItem(`${e}_blRender`,t.getItem(`${e}_blRender`)!==null?t.getItem(`${e}_blRender`):"Renderer"),t.setItem(`${e}_brRender`,t.getItem(`${e}_brRender`)!==null?t.getItem(`${e}_brRender`):"Renderer");const n={Vector2:a.Vector2,Vector3:a.Vector3,Vector4:a.Vector4,Quaternion:a.Quaternion,Matrix4:a.Matrix4,Spherical:a.Spherical,Box3:a.Box3,Sphere:a.Sphere,Raycaster:a.Raycaster};g.install({THREE:n});const r=localStorage.getItem(this.expandedCameraVisibility);r!==null&&(this.cameraVisibility=r==="open"),this.saveExpandedCameraVisibility();const h=localStorage.getItem(this.expandedLightVisibility);h!==null&&(this.lightVisibility=h==="open"),this.saveExpandedLightVisibility();const m=localStorage.getItem(this.expandedGridVisibility);m!==null&&(this.gridVisibility=m==="open"),this.grid&&(this.grid.visible=this.gridVisibility),this.saveExpandedGridVisibility(),A.instance=this}componentDidMount(){this.setupScene(),this.setupTools(),this.enable(),this.assignControls(),this.resize(),this.play(),u.instance.setApp(this.props.three),u.instance.activeCamera=this.debugCamera,this.props.three.requestRenderer()}componentDidUpdate(i,e,t){e.mode!==this.state.mode&&(this.assignControls(),this.resize())}componentWillUnmount(){this.disable(),this.clear(),b.removeEditorGroup("View Settings")}render(){const i=[];return this.cameras.forEach((e,t)=>{i.push(t)}),o.jsxs("div",{className:"multiview",children:[o.jsx("canvas",{ref:this.canvasRef}),o.jsxs("div",{className:`cameras ${this.state.mode==="Single"||this.state.mode==="Stacked"?"single":""}`,ref:this.containerRef,children:[this.state.mode==="Single"&&o.jsx(o.Fragment,{children:o.jsx(d.default,{name:"tl",camera:this.tlCam,options:i,ref:this.tlWindow,onSelectCamera:e=>{this.controls.get(this.tlCam.name)?.dispose();const t=this.cameras.get(e);t!==void 0&&(this.clearCamera(this.tlCam),this.tlCam=t,localStorage.setItem(`${this.appID}_tlCam`,t.name),this.createControls(t,this.tlWindow.current))},onSelectRenderMode:e=>{this.tlRender=e,localStorage.setItem(`${this.appID}_tlRender`,e)}})}),(this.state.mode==="Side by Side"||this.state.mode==="Stacked")&&o.jsxs(o.Fragment,{children:[o.jsx(d.default,{name:"tl",camera:this.tlCam,options:i,ref:this.tlWindow,onSelectCamera:e=>{this.controls.get(this.tlCam.name)?.dispose();const t=this.cameras.get(e);t!==void 0&&(this.clearCamera(this.tlCam),this.tlCam=t,localStorage.setItem(`${this.appID}_tlCam`,t.name),this.createControls(t,this.tlWindow.current))},onSelectRenderMode:e=>{this.tlRender=e,localStorage.setItem(`${this.appID}_tlRender`,e)}}),o.jsx(d.default,{name:"tr",camera:this.trCam,options:i,ref:this.trWindow,onSelectCamera:e=>{this.controls.get(this.trCam.name)?.dispose();const t=this.cameras.get(e);t!==void 0&&(this.clearCamera(this.trCam),this.trCam=t,localStorage.setItem(`${this.appID}_trCam`,t.name),this.createControls(t,this.trWindow.current))},onSelectRenderMode:e=>{this.trRender=e,localStorage.setItem(`${this.appID}_trRender`,e)}})]}),this.state.mode==="Quad"&&o.jsxs(o.Fragment,{children:[o.jsx(d.default,{name:"tl",camera:this.tlCam,options:i,ref:this.tlWindow,onSelectCamera:e=>{this.controls.get(this.tlCam.name)?.dispose();const t=this.cameras.get(e);t!==void 0&&(this.clearCamera(this.tlCam),this.tlCam=t,localStorage.setItem(`${this.appID}_tlCam`,t.name),this.createControls(t,this.tlWindow.current))},onSelectRenderMode:e=>{this.tlRender=e,localStorage.setItem(`${this.appID}_tlRender`,e)}}),o.jsx(d.default,{name:"tr",camera:this.trCam,options:i,ref:this.trWindow,onSelectCamera:e=>{this.controls.get(this.trCam.name)?.dispose();const t=this.cameras.get(e);t!==void 0&&(this.clearCamera(this.trCam),this.trCam=t,localStorage.setItem(`${this.appID}_trCam`,t.name),this.createControls(t,this.trWindow.current))},onSelectRenderMode:e=>{this.trRender=e,localStorage.setItem(`${this.appID}_trRender`,e)}}),o.jsx(d.default,{name:"bl",camera:this.blCam,options:i,ref:this.blWindow,onSelectCamera:e=>{this.controls.get(this.blCam.name)?.dispose();const t=this.cameras.get(e);t!==void 0&&(this.clearCamera(this.blCam),this.blCam=t,localStorage.setItem(`${this.appID}_blCam`,t.name),this.createControls(t,this.blWindow.current))},onSelectRenderMode:e=>{this.blRender=e,localStorage.setItem(`${this.appID}_blRender`,e)}}),o.jsx(d.default,{name:"br",camera:this.brCam,options:i,ref:this.brWindow,onSelectCamera:e=>{this.controls.get(this.brCam.name)?.dispose();const t=this.cameras.get(e);t!==void 0&&(this.clearCamera(this.brCam),this.brCam=t,localStorage.setItem(`${this.appID}_brCam`,t.name),this.createControls(t,this.brWindow.current))},onSelectRenderMode:e=>{this.brRender=e,localStorage.setItem(`${this.appID}_brRender`,e)}})]})]}),o.jsxs("div",{className:"settings",children:[o.jsx(d.Dropdown,{title:"View",index:I.indexOf(this.state.mode),options:I,onSelect:e=>{e!==this.state.mode&&(this.killControls(),this.setState({mode:e}),localStorage.setItem(`${this.appID}_mode`,e))},open:this.state.modeOpen,onToggle:e=>{this.setState({modeOpen:e,renderModeOpen:!1,interactionModeOpen:!1})}}),o.jsx(d.Dropdown,{title:"Interact",index:this.state.interactionMode==="Orbit"?0:1,options:["Orbit Mode","Selection Mode"],onSelect:e=>{this.interactionHelper.visible=e==="Selection Mode",this.setState({interactionMode:this.interactionHelper.visible?"Selection":"Orbit"})},open:this.state.interactionModeOpen,onToggle:e=>{this.setState({modeOpen:!1,renderModeOpen:!1,interactionModeOpen:e})}}),o.jsx(w,{name:"cameraHelper",icon:L,selected:this.cameraVisibility,height:24,top:2,onClick:e=>{if(this.cameraVisibility=e,this.saveExpandedCameraVisibility(),this.cameraHelpers.forEach(t=>{t.visible=e}),this.selectedItem!==void 0&&!e){const t=this.cameraHelpers.get(this.selectedItem.name);t!==void 0&&(t.visible=!0)}}}),o.jsx(w,{name:"lightHelper",icon:O,selected:this.lightVisibility,height:24,top:4,onClick:e=>{if(this.lightVisibility=e,this.saveExpandedLightVisibility(),this.lightHelpers.forEach(t=>{t.visible=e}),this.selectedItem!==void 0&&!e&&this.selectedItem.isLight===!0){const t=this.lightHelpers.get(this.selectedItem.name);t!==void 0&&(t.visible=!0)}}}),o.jsx(w,{name:"gridHelper",icon:k,selected:this.gridVisibility,height:21,width:21,onClick:e=>{this.setGridVisibility(e)}})]},this.state.lastUpdate)]})}setupRenderer=i=>{const e=i.value;if(this.renderer){if(this.renderer instanceof S.WebGLRenderer&&e.type==="WebGLRenderer"||this.renderer instanceof a.WebGPURenderer&&e.type==="WebGPURenderer")return;this.renderer.dispose()}this.rendererReady=!1;const t=this.canvasRef.current;if(t===null){setTimeout(()=>this.props.three.requestRenderer(),100);return}this.props.three.canvas=t,e.type==="WebGLRenderer"?(this.renderer=new S.WebGLRenderer({canvas:t,stencil:!1}),this.grid&&(this.scene.remove(this.grid),v.dispose(this.grid)),this.grid=new E,this.scene.add(this.grid),this.rendererReady=!0):e.type==="WebGPURenderer"&&(this.renderer=new a.WebGPURenderer({canvas:t,stencil:!1}),this.grid&&(this.scene.remove(this.grid),v.dispose(this.grid)),this.grid=new M,this.scene.add(this.grid)),this.renderer&&(this.renderer.autoClear=!1,this.renderer.shadowMap.enabled=!0,this.renderer.setClearColor(0),this.renderer.setPixelRatio(devicePixelRatio),this.renderer.setScissorTest(!0),this.resize(),this.props.three.renderer=this.renderer,this.depthMaterial?.dispose(),this.normalsMaterial?.dispose(),this.uvMaterial?.dispose(),this.depthMaterial=new V,this.normalsMaterial=new a.MeshNormalNodeMaterial,this.uvMaterial=new H,e.type==="WebGPURenderer"?this.renderer.init().then(()=>{this.rendererReady=!0,this.props.three.requestScene()}):this.props.three.requestScene())};setupScene(){this.helpersContainer.name="helpers",this.scene.add(this.helpersContainer),this.interactionHelper.name="interactionHelper",this.interactionHelper.visible=!1,this.helpersContainer.add(this.interactionHelper);const i=(n,r)=>{const h=new a.OrthographicCamera(-100,100,100,-100,0,3e3);return h.name=n,h.position.copy(r),h.lookAt(0,0,0),this.cameras.set(n,h),h},e=1e3;i("Top",new a.Vector3(0,e,0)),i("Bottom",new a.Vector3(0,-e,0)),i("Left",new a.Vector3(-e,0,0)),i("Right",new a.Vector3(e,0,0)),i("Front",new a.Vector3(0,0,e)),i("Back",new a.Vector3(0,0,-e)),i("Orthographic",new a.Vector3(e,e,e)),i("UI",new a.Vector3),this.debugCamera=new a.PerspectiveCamera(60,1,.01,3e3),this.debugCamera.name="Debug",this.debugCamera.position.set(300,300,300),this.debugCamera.lookAt(0,0,0),this.cameras.set("Debug",this.debugCamera),this.currentCamera=this.debugCamera;const t=localStorage,s=this.props.three.name;this.tlCam=this.cameras.get(t.getItem(`${s}_tlCam`)),this.trCam=this.cameras.get(t.getItem(`${s}_trCam`)),this.blCam=this.cameras.get(t.getItem(`${s}_blCam`)),this.brCam=this.cameras.get(t.getItem(`${s}_brCam`)),this.tlCam===void 0&&(this.tlCam=this.cameras.get("Debug")),this.trCam===void 0&&(this.trCam=this.cameras.get("Orthographic")),this.blCam===void 0&&(this.blCam=this.cameras.get("Front")),this.brCam===void 0&&(this.brCam=this.cameras.get("Top")),b.addEditorGroup({title:"Editor",items:[{type:"button",prop:"Hide All Transforms"},{type:"button",prop:"Resize"}],onUpdate:(n,r)=>{switch(n){case"Hide All Transforms":u.instance.hide();break;case"Resize":this.resize();break}},subgroups:[{title:"Debug Camera",items:[{type:"range",prop:"Near",step:1e-4,min:.001,max:1e3,value:this.debugCamera.near},{type:"range",prop:"Far",step:.001,min:.001,max:1e4,value:this.debugCamera.far}],onUpdate:(n,r)=>{switch(n){case"Near":this.debugCamera.near=r,this.debugCamera.updateProjectionMatrix();break;case"Far":this.debugCamera.far=r,this.debugCamera.updateProjectionMatrix();break}}},{title:"Grid",items:[{type:"number",prop:"Position",value:0},{type:"color",prop:"Color",value:"#FFFFFF"},{type:"range",prop:"Grid Opacity",value:.25,min:0,max:1,step:.01},{type:"range",prop:"Subgrid Opacity",value:.15,min:0,max:1,step:.01}],onUpdate:(n,r)=>{switch(n){case"Position":this.grid&&(this.grid.position.y=r);break;case"Color":this.grid&&this.grid.color.setStyle(r);break;case"Grid Opacity":this.grid&&(this.grid.gridOpacity=r);break;case"Subgrid Opacity":this.grid&&(this.grid.subgridOpacity=r);break}}}]})}setupTools(){this.splineEditor=new x(this.currentCamera,this.three),this.splineEditor.initDebug(),this.helpersContainer.add(this.splineEditor)}play(){this.playing=!0,this.onUpdate()}pause(){this.playing=!1,cancelAnimationFrame(this.rafID),this.rafID=-1}toggleOrbitControls(i){this.controls.forEach(e=>{e.enabled=!i})}clear(){this.three.dispatchEvent({type:c.ToolEvents.CLEAR_OBJECT}),b.removeAllGroups(),this.clearLightHelpers(),this.clearControls(),this.currentTransform!==void 0&&(this.currentTransform.removeEventListener("objectChange",this.onUpdateTransform),u.instance.remove(this.currentTransform.getHelper().name)),this.currentTransform=void 0,u.instance.clear(),this.cameras.forEach(i=>{this.editorCameras.indexOf(i.name)<0&&this.three.dispatchEvent({type:c.ToolEvents.REMOVE_CAMERA,value:i})}),this.currentCamera=this.debugCamera,this.currentScene=void 0,this.scenes.forEach(i=>{this.three.dispatchEvent({type:c.ToolEvents.REMOVE_SCENE,value:i})}),this.scenes.clear()}setGridVisibility(i){this.gridVisibility=i,this.saveExpandedGridVisibility(),this.grid&&(this.grid.visible=i)}update(){this.controls.forEach(i=>i.update()),this.cameraHelpers.forEach(i=>i.update()),this.lightHelpers.forEach(i=>{i.update!==void 0&&i.update()}),this.props.onSceneUpdate!==void 0&&this.currentScene!==void 0&&this.props.onSceneUpdate(this.currentScene)}draw(){if(this.rendererReady)switch(this.renderer&&this.renderer?.clear(),this.state.mode){case"Single":this.drawSingle();break;case"Side by Side":case"Stacked":this.drawDouble();break;case"Quad":this.drawQuad();break}}onUpdate=()=>{this.playing&&(this.update(),this.draw(),this.rafID=requestAnimationFrame(this.onUpdate))};enable(){const i=this.containerRef.current;i.addEventListener("mousemove",this.onMouseMove),i.addEventListener("click",this.onClick),window.addEventListener("keydown",this.onKey),window.addEventListener("resize",this.resize),this.three.addEventListener(c.ToolEvents.ADD_SCENE,this.addScene),this.three.addEventListener(c.ToolEvents.SET_SCENE,this.sceneUpdate),this.three.addEventListener(c.ToolEvents.REMOVE_SCENE,this.removeScene),this.three.addEventListener(c.ToolEvents.ADD_CAMERA,this.addCamera),this.three.addEventListener(c.ToolEvents.REMOVE_CAMERA,this.removeCamera),this.three.addEventListener(c.ToolEvents.SET_OBJECT,this.onSetSelectedItem)}disable(){const i=this.containerRef.current;i.removeEventListener("mousemove",this.onMouseMove),i.removeEventListener("click",this.onClick),window.removeEventListener("keydown",this.onKey),window.removeEventListener("resize",this.resize),this.three.removeEventListener(c.ToolEvents.ADD_SCENE,this.addScene),this.three.removeEventListener(c.ToolEvents.SET_SCENE,this.sceneUpdate),this.three.removeEventListener(c.ToolEvents.REMOVE_SCENE,this.removeScene),this.three.removeEventListener(c.ToolEvents.ADD_CAMERA,this.addCamera),this.three.removeEventListener(c.ToolEvents.REMOVE_CAMERA,this.removeCamera),this.three.removeEventListener(c.ToolEvents.SET_OBJECT,this.onSetSelectedItem)}resize=()=>{this.width=window.innerWidth-300,this.height=window.innerHeight,this.renderer?.setSize(this.width,this.height);const i=Math.floor(this.width/2),e=Math.floor(this.height/2);this.props.three.resize(this.width,this.height),this.props.onSceneResize!==void 0&&this.currentScene!==void 0&&this.props.onSceneResize(this.currentScene,this.width,this.height);let t=this.width,s=this.height;switch(this.state.mode){case"Side by Side":t=i,s=this.height;break;case"Stacked":t=this.width,s=e;break;case"Quad":t=i,s=e;break}const n=t/s;this.cameras.forEach(r=>{r instanceof a.OrthographicCamera?(r.left=t/-2,r.right=t/2,r.top=s/2,r.bottom=s/-2,r.name==="UI"&&(r.position.x=this.width/2,r.position.y=this.height/-2,r.position.z=100),r.updateProjectionMatrix()):r instanceof a.PerspectiveCamera&&(r.aspect=n,r.updateProjectionMatrix()),this.cameraHelpers.get(r.name)?.update()})};addScene=i=>{const e=this.props.scenes.get(i.value.name);if(e!==void 0){const t=this.scenes.get(i.value.name);if(t!==void 0){this.props.onSceneAdd!==void 0&&this.props.onSceneAdd(t),this.props.three.scene=t;return}const s=new e;s.visible=!1,this.props.onSceneAdd!==void 0&&this.props.onSceneAdd(s),this.props.three.scene=s,this.scenes.set(i.value.name,s),this.scene.add(s)}else console.log("Hermes - Scene not found:",i.value.name,this.props.scenes)};sceneUpdate=i=>{this.currentScene!==void 0&&(this.currentScene.visible=!1,this.clearLightHelpers());const e=this.scene.getObjectByName(i.value.name);e!==void 0&&(this.currentScene=e,this.currentScene.visible=!0,this.addLightHelpers(this.currentScene)),this.cameraHelpers.forEach((t,s)=>{const n=this.currentScene!==void 0&&this.currentScene.getObjectByProperty("uuid",s)!==void 0;t.visible=this.cameraVisibility&&n})};removeScene=i=>{const e=i.value.name;this.scenes.delete(e);const t=this.scene.getObjectByName(e);t&&setTimeout(()=>{v.dispose(t)},100),this.clearLightHelpers()};addCamera=i=>{const e=i.value,t=e.uuid,s=this.props.three.scene?.getObjectByProperty("uuid",e.uuid);if(s!==void 0){const n=s;this.cameras.set(t,n);const r=new a.CameraHelper(n),h=this.currentScene!==void 0&&this.currentScene.getObjectByProperty("uuid",t)!==void 0;r.visible=this.cameraVisibility&&h,this.cameraHelpers.set(t,r),this.helpersContainer.add(r),this.setState({lastUpdate:Date.now()})}};removeCamera=i=>{const t=i.value.uuid,s=this.cameraHelpers.get(t);s!==void 0&&(this.helpersContainer.remove(s),s.dispose()),this.cameras.delete(t),this.setState({lastUpdate:Date.now()})};onMouseMove=i=>{const e=new a.Vector2;this.renderer?.getSize(e);const t=Math.min(i.clientX,e.x),s=Math.min(i.clientY,e.y);this.pointer.x=p.mapLinear(t,0,e.x,-1,1),this.pointer.y=p.mapLinear(s,0,e.y,1,-1);const n=e.x/2,r=e.y/2,h=()=>{t<n?this.pointer.x=p.mapLinear(t,0,n,-1,1):this.pointer.x=p.mapLinear(t,n,e.x,-1,1)},m=()=>{s<r?this.pointer.y=p.mapLinear(s,0,r,1,-1):this.pointer.y=p.mapLinear(s,r,e.y,1,-1)};switch(this.state.mode){case"Quad":h(),m();break;case"Side by Side":h();break;case"Stacked":m(),m();break}if(this.updateCamera(t,s,n,r),this.state.interactionMode==="Orbit"||this.currentScene===void 0)return;const l=this.raycaster.intersectObjects(this.currentScene.children);l.length>0&&this.interactionHelper.position.copy(l[0].point)};onClick=i=>{if(this.state.interactionMode==="Orbit"||this.currentScene===void 0)return;const e=new a.Vector2;if(this.renderer.getSize(e),i.clientX>=e.x)return;this.onMouseMove(i);const t=this.raycaster.intersectObjects(this.currentScene.children);t.length>0&&(this.props.three.getObject(t[0].object.uuid),this.interactionHelper.visible=!1,this.setState({interactionMode:"Orbit",lastUpdate:Date.now()}))};onKey=i=>{if(this.selectedItem!==void 0){if(i.ctrlKey){if(this.currentCamera.name==="UI")return;const e=this.controls.get(this.currentCamera.name);i.key==="0"?(i.preventDefault(),this.clearControls(),this.cameraControls=new g(this.currentCamera,this.currentWindow.current),this.selectedItem instanceof a.Mesh||this.selectedItem instanceof a.SkinnedMesh?(this.selectedItem.geometry.computeBoundingBox(),this.cameraControls.fitToBox(this.selectedItem.geometry.boundingBox,!0)):this.cameraControls.fitToSphere(this.selectedItem,!0),this.updateCameraControls(e,!0)):i.key==="1"?(i.preventDefault(),this.clearControls(),this.cameraControls=new g(this.currentCamera,this.currentWindow.current),this.cameraControls.rotateTo(0,Math.PI*.5,!0),this.cameraControls.moveTo(this.selectedItem.position.x,this.selectedItem.position.y,0,!0),this.updateCameraControls(e)):i.key==="2"?(i.preventDefault(),this.clearControls(),this.cameraControls=new g(this.currentCamera,this.currentWindow.current),this.cameraControls.rotateTo(0,0,!0),this.cameraControls.moveTo(this.selectedItem.position.x,0,this.selectedItem.position.z,!0),this.updateCameraControls(e)):i.key==="3"?(i.preventDefault(),this.clearControls(),this.cameraControls=new g(this.currentCamera,this.currentWindow.current),this.cameraControls.rotateTo(Math.PI/2,Math.PI/2,!0),this.cameraControls.moveTo(0,this.selectedItem.position.y,this.selectedItem.position.z,!0),this.updateCameraControls(e)):i.key==="4"?(i.preventDefault(),this.clearControls(),this.cameraControls=new g(this.currentCamera,this.currentWindow.current),this.cameraControls.rotateTo(Math.PI,Math.PI/2,!0),this.cameraControls.moveTo(this.selectedItem.position.x,this.selectedItem.position.y,0,!0),this.updateCameraControls(e)):i.key==="5"&&(i.preventDefault(),this.clearControls(),this.cameraControls=new g(this.currentCamera,this.currentWindow.current),this.cameraControls.rotateTo(p.degToRad(45),p.degToRad(45),!0),this.updateCameraControls(e))}else if(this.currentTransform!==void 0)switch(i.key){case"r":this.currentTransform.setMode("rotate");break;case"s":this.currentTransform.setMode("scale");break;case"t":this.currentTransform.setMode("translate");break;case"q":this.currentTransform.setSpace(this.currentTransform.space==="local"?"world":"local");break}}};onSetSelectedItem=i=>{this.selectedItem!==void 0&&this.updateSelectedItemHelper(!1),this.selectedItem=void 0;const e=i.value.uuid;if(this.scenes.forEach(t=>{e.search(t.uuid)>-1&&(this.selectedItem=t.getObjectByProperty("uuid",e))}),this.selectedItem===void 0){console.log(`Hermes - Can't find selected item: ${i.value.uuid}, ${i.value.name}`);return}this.currentTransform!==void 0&&(this.currentTransform.removeEventListener("objectChange",this.onUpdateTransform),u.instance.remove(this.currentTransform.getHelper().name)),this.currentTransform=u.instance.add(i.value.name),this.currentTransform&&(this.currentTransform.attach(this.selectedItem),this.helpersContainer.add(this.currentTransform.getHelper()),this.currentTransform.addEventListener("objectChange",this.onUpdateTransform)),this.updateSelectedItemHelper(!0)};updateSelectedItemHelper(i){if(this.selectedItem!==void 0)if(this.cameraVisibility){if(this.selectedItem.isLight===!0&&!this.lightVisibility){const e=this.lightHelpers.get(this.selectedItem.name);e!==void 0&&(e.visible=i)}}else{const e=this.cameraHelpers.get(this.selectedItem.name);e!==void 0&&(e.visible=i)}}onUpdateTransform=()=>{this.selectedItem!==void 0&&(this.props.three.updateObject(this.selectedItem.uuid,"position",this.selectedItem.position),this.props.three.updateObject(this.selectedItem.uuid,"rotation",{x:this.selectedItem.rotation.x,y:this.selectedItem.rotation.y,z:this.selectedItem.rotation.z}),this.props.three.updateObject(this.selectedItem.uuid,"scale",this.selectedItem.scale),T.InspectTransform.instance.update())};clearLightHelpers=()=>{this.lightHelpers.forEach(i=>{this.helpersContainer.remove(i),i.dispose()}),this.lightHelpers.clear()};addLightHelpers=i=>{i.traverse(e=>{if(e.type.search("Light")>-1){let t;switch(e.type){case"DirectionalLight":t=new a.DirectionalLightHelper(e,100),t.name=`${e.name}Helper`,t.visible=this.lightVisibility,this.lightHelpers.set(e.name,t),this.helpersContainer.add(t);break;case"HemisphereLight":t=new a.HemisphereLightHelper(e,250),t.name=`${e.name}Helper`,t.visible=this.lightVisibility,this.lightHelpers.set(e.name,t),this.helpersContainer.add(t);break;case"RectAreaLight":t=new y.RectAreaLightHelper(e),t.name=`${e.name}Helper`,t.visible=this.lightVisibility,this.lightHelpers.set(e.name,t),this.helpersContainer.add(t);break;case"PointLight":t=new a.PointLightHelper(e,100),t.name=`${e.name}Helper`,t.visible=this.lightVisibility,this.lightHelpers.set(e.name,t),this.helpersContainer.add(t);break;case"SpotLight":t=new a.SpotLightHelper(e),t.name=`${e.name}Helper`,t.visible=this.lightVisibility,this.lightHelpers.set(e.name,t),this.helpersContainer.add(t);break}}})};createControls(i,e){const t=this.controls.get(i.name);if(t!==void 0&&t.dispose(),this.controls.delete(i.name),i.name==="UI")return;const s=new R.OrbitControls(i,e);switch(s.enableDamping=!0,s.dampingFactor=.1,i.name){case"Top":case"Bottom":case"Left":case"Right":case"Front":case"Back":s.enableRotate=!1;break}this.controls.set(i.name,s)}clearCamera(i){const e=this.cameraHelpers.get(i.name);e!==void 0&&(this.helpersContainer.remove(e),e.dispose(),this.cameraHelpers.delete(i.name));const t=this.controls.get(i.name);t!==void 0&&(t.dispose(),this.controls.delete(i.name))}killControls(){this.controls.forEach((i,e)=>{i.dispose();const t=this.cameraHelpers.get(e);t!==void 0&&(this.helpersContainer.remove(t),t.dispose()),this.cameraHelpers.delete(e),this.controls.delete(e)}),this.controls.clear(),this.cameraHelpers.clear()}assignControls(){switch(this.state.mode){case"Single":this.createControls(this.tlCam,this.tlWindow.current);break;case"Side by Side":case"Stacked":this.createControls(this.tlCam,this.tlWindow.current),this.createControls(this.trCam,this.trWindow.current);break;case"Quad":this.createControls(this.tlCam,this.tlWindow.current),this.createControls(this.trCam,this.trWindow.current),this.createControls(this.blCam,this.blWindow.current),this.createControls(this.brCam,this.brWindow.current);break}}updateCamera=(i,e,t,s)=>{switch(this.state.mode){case"Quad":e<s?i<t?this.currentCamera=this.tlCam:this.currentCamera=this.trCam:i<t?this.currentCamera=this.blCam:this.currentCamera=this.brCam;break;case"Side by Side":i<t?this.currentCamera=this.tlCam:this.currentCamera=this.trCam;break;case"Single":this.currentCamera=this.tlCam;break;case"Stacked":e<s?this.currentCamera=this.tlCam:this.currentCamera=this.trCam;break}this.splineEditor.camera=this.currentCamera,this.raycaster.setFromCamera(this.pointer,this.currentCamera),this.currentCamera===this.tlCam?this.currentWindow=this.tlWindow:this.currentCamera===this.trCam?this.currentWindow=this.trWindow:this.currentCamera===this.blCam?this.currentWindow=this.blWindow:this.currentCamera===this.brCam&&(this.currentWindow=this.brWindow),u.instance.updateCamera(this.currentCamera,this.currentWindow.current)};updateCameraControls=(i,e=!1)=>{if(this.selectedItem===void 0)return;cancelAnimationFrame(this.cameraControlsRafID),this.cameraControlsRafID=-1,this.cameraControls&&(this.cameraControls.smoothTime=.1);const t=.15;this.cameraControlsStartTime=performance.now(),this.cameraControlsLastTime=this.cameraControlsStartTime,this.selectedItem.getWorldPosition(i.target0);const s=()=>{const n=performance.now(),r=(n-this.cameraControlsLastTime)/1e3;this.cameraControlsLastTime=n,this.cameraControls&&this.cameraControls.update(r),e&&(i.target.lerp(i.target0,t),i.object.position.lerp(i.position0,t),i.object.zoom=W.mix(i.object.zoom,i.zoom0,t),i.object.updateProjectionMatrix(),i.dispatchEvent({type:"change"})),(n-this.cameraControlsStartTime)/1e3>=.5?(cancelAnimationFrame(this.cameraControlsRafID),this.cameraControlsRafID=-1,this.clearControls()):this.cameraControlsRafID=requestAnimationFrame(s)};s()};clearControls=()=>{this.cameraControls!==void 0&&(this.cameraControls.disconnect(),this.cameraControls.dispose(),this.cameraControls=void 0)};saveExpandedCameraVisibility(){localStorage.setItem(this.expandedCameraVisibility,this.cameraVisibility?"open":"closed")}saveExpandedLightVisibility(){localStorage.setItem(this.expandedLightVisibility,this.lightVisibility?"open":"closed")}saveExpandedGridVisibility(){localStorage.setItem(this.expandedGridVisibility,this.gridVisibility?"open":"closed")}getSceneOverride(i){switch(i){case"Depth":return this.depthMaterial;case"Normals":return this.normalsMaterial;case"Renderer":return null;case"UVs":return this.uvMaterial;case"Wireframe":return this.wireframeMaterial}return null}drawTo(i,e,t,s,n,r){switch(n.name){case"Left":case"Right":this.grid&&(this.grid.rotation.z=Math.PI/2);break;case"Front":case"Back":this.grid&&(this.grid.rotation.x=Math.PI/2);break}this.scene.overrideMaterial=r,this.renderer&&(this.renderer?.setScissor(i,e,t,s),this.renderer?.setViewport(i,e,t,s),this.renderer?.render(this.scene,n)),this.grid&&this.grid.rotation.set(0,0,0)}drawSingle(){const i=this.getSceneOverride(this.tlRender);this.drawTo(0,0,this.width,this.height,this.tlCam,i)}drawDouble=()=>{const i=this.getSceneOverride(this.tlRender),e=this.getSceneOverride(this.trRender),t=Math.floor(this.width/2),s=Math.floor(this.height/2),n=this.renderer instanceof a.WebGPURenderer;if(this.state.mode==="Side by Side")this.drawTo(0,0,t,this.height,this.tlCam,i),this.drawTo(t,0,t,this.height,this.trCam,e);else{const r=this.height-s;n?(this.drawTo(0,0,this.width,s,this.tlCam,i),this.drawTo(0,r,this.width,s,this.trCam,e)):(this.drawTo(0,r,this.width,s,this.tlCam,i),this.drawTo(0,0,this.width,s,this.trCam,e))}};drawQuad=()=>{const i=this.renderer instanceof a.WebGPURenderer,e=this.getSceneOverride(this.tlRender),t=this.getSceneOverride(this.trRender),s=this.getSceneOverride(this.blRender),n=this.getSceneOverride(this.brRender),r=Math.floor(this.width/2),h=Math.floor(this.height/2),m=this.height-h;let l=0,f=i?0:this.height-h;l=0,this.drawTo(l,f,r,h,this.tlCam,e),l=r,this.drawTo(l,f,r,h,this.trCam,t),f=i?m:0,l=0,this.scene.overrideMaterial=s,this.drawTo(l,f,r,h,this.blCam,s),l=r,this.drawTo(l,f,r,h,this.brCam,n)};get appID(){return this.props.three.name}get mode(){return this.state.mode}get three(){return this.props.three}get expandedCameraVisibility(){return`${this.appID}_multiviewCameraVisibility`}get expandedLightVisibility(){return`${this.appID}_multiviewLightVisibility`}get expandedGridVisibility(){return`${this.appID}_multiviewGridVisibility`}}module.exports=A;