@cocalc/static
Version:
CoCalc's static frontend Webpack-based build system and framework
1 lines • 17.6 kB
JavaScript
(self.webpackChunk_cocalc_static=self.webpackChunk_cocalc_static||[]).push([[9852],{69852:(e,t,s)=>{var i,n,r,a,o,h,c,l,d,_,p,u,m;i=window.$,h=s(29280),p=s(24620),({defaults:l,required:u}=p),c=function(e){var t;return 1===(t=e.toString(16)).length?"0"+t:t},m=function(e,t,s){return e<=1&&t<=1&&s<=1&&(e=Math.round(255*e),t=Math.round(255*t),s=Math.round(255*s)),"#"+c(e)+c(t)+c(s)},window.THREE=s(45053),s(47847),s(57794),s(77816),n=s(21200),o=void 0,a={webgl:void 0,canvas:void 0},d=void 0,_=function(e,t){return null!=o&&o._id!==e._id&&o.set_static_renderer(),o=e,t=!n.webgl||null!=t&&"webgl"!==t?"canvas":"webgl",d=t,null==a[t]&&(a[t]="webgl"===t?new THREE.WebGLRenderer({antialias:!0,alpha:!0,preserveDrawingBuffer:!0}):new THREE.CanvasRenderer({antialias:!0,alpha:!0}),i(a[t].domElement).addClass("webapp-3d-dynamic-renderer")),a[t]},r=class{constructor(e){this.init=this.init.bind(this),this.init_done=this.init_done.bind(this),this.init_eval_note=this.init_eval_note.bind(this),this.set_dynamic_renderer=this.set_dynamic_renderer.bind(this),this.set_static_renderer=this.set_static_renderer.bind(this),this.init_on_mouseover=this.init_on_mouseover.bind(this),this.init_aspect_ratio_functions=this.init_aspect_ratio_functions.bind(this),this.show_canvas=this.show_canvas.bind(this),this.data_url=this.data_url.bind(this),this.init_orbit_controls=this.init_orbit_controls.bind(this),this.add_camera=this.add_camera.bind(this),this.init_light=this.init_light.bind(this),this.add_text=this.add_text.bind(this),this.add_line=this.add_line.bind(this),this.add_point=this.add_point.bind(this),this.add_obj=this.add_obj.bind(this),this.set_frame=this.set_frame.bind(this),this.add_3dgraphics_obj=this.add_3dgraphics_obj.bind(this),this.animate=this.animate.bind(this),this._animate=this._animate.bind(this),this.render_scene=this.render_scene.bind(this),this._rescale_factor=this._rescale_factor.bind(this),this.rescale_objects=this.rescale_objects.bind(this),this.opts=l(e,{element:u,container:u,width:void 0,height:void 0,renderer:void 0,background:"transparent",foreground:void 0,spin:!1,camera_distance:10,aspect_ratio:void 0,stop_when_gone:void 0,frame:void 0,cb:void 0}),p.is_array(this.opts.background)&&(this.opts.background=m(this.opts.background[0],this.opts.background[1],this.opts.background[2])),this.init_eval_note(),"function"==typeof e.cb&&e.cb(void 0,this)}init(){var e,t,s,n,r,a,o;if(!this._init&&(this._init=!0,this._id=p.uuid(),this.init_aspect_ratio_functions(),this.scene=new THREE.Scene,(null==this.opts.width||this.opts.width<16)&&(this.opts.width=.5*i(window).width()),this.opts.height=null!=this.opts.height&&this.opts.height>=16?this.opts.height:2*this.opts.width/3,this.opts.container.css({width:`${this.opts.width+50}px`}),this.set_dynamic_renderer(),this.init_orbit_controls(),this.init_on_mouseover(),this.init_light(),this.opts.element.find(".webapp-3d-canvas").css({background:this.opts.background}),null==this.opts.foreground)){if("transparent"===this.opts.background)return this.opts.foreground="gray";if(null==(t=this.opts.element.find(".webapp-3d-canvas").css("background"))||-1===t.indexOf(")"))return this.opts.foreground="#000";for(s=t.indexOf(")"),o=[],n=0,r=(a=t.slice(4,s).split(",")).length;n<r;n++)e=a[n],parseInt(e)<128?o.push(255):o.push(0);return this.opts.foreground=m(o[0],o[1],o[2])}}init_done(){var e;if(null!=this.opts.frame&&this.set_frame(this.opts.frame),"dynamic"!==this.renderer_type&&(e=o,this.set_dynamic_renderer(),this.set_static_renderer(),null!=e&&e.set_dynamic_renderer()),"canvas"===d)return this.opts.element.find(".webapp-3d-canvas-warning").show().tooltip()}init_eval_note(){return setTimeout((()=>{if(!this._init)return this.opts.element.find(".webapp-3d-note").show()}),1e3)}set_dynamic_renderer(){if("dynamic"!==this.renderer_type)return this.renderer=_(this,this.opts.renderer),this.renderer_type="dynamic",this.opts.element.find(".webapp-3d-canvas").empty().append(i(this.renderer.domElement)),"transparent"===this.opts.background?this.renderer.setClearColor(0,0):this.renderer.setClearColor(this.opts.background,1),this.renderer.setSize(this.opts.width,this.opts.height),null!=this.controls&&(this.controls.enabled=!0,null!=this.last_canvas_pos&&this.controls.object.position.copy(this.last_canvas_pos),null!=this.last_canvas_target&&this.controls.target.copy(this.last_canvas_target)),this.opts.spin&&this.animate({render:!1}),this.render_scene(!0)}set_static_renderer(){var e;if("static"!==this.renderer_type)return this.static_image=this.data_url(),this.renderer_type="static",null!=this.controls&&(this.controls.enabled=!1,this.last_canvas_pos=this.controls.object.position,this.last_canvas_target=this.controls.target),e=i("<img class='webapp-3d-static-renderer'>").attr({src:this.static_image}).width(this.opts.width).height(this.opts.height),this.opts.element.find(".webapp-3d-canvas").empty().append(e)}init_on_mouseover(){return this.opts.element.mouseenter((()=>this.set_dynamic_renderer())),this.opts.element.mouseleave((()=>this.set_static_renderer())),this.opts.element.click((()=>this.set_dynamic_renderer()))}init_aspect_ratio_functions(){var e,t,s;return null!=this.opts.aspect_ratio?(e=this.opts.aspect_ratio[0],t=this.opts.aspect_ratio[1],s=this.opts.aspect_ratio[2],this.vector3=(i,n,r)=>new THREE.Vector3(-t*n,e*i,s*r),this.vector=i=>new THREE.Vector3(-t*i[1],e*i[0],s*i[2]),this.aspect_ratio_scale=i=>[-t*i[1],e*i[0],s*i[2]]):(this.vector3=(e,t,s)=>new THREE.Vector3(-t,e,s),this.vector=e=>new THREE.Vector3(-e[1],e[0],e[2]),this.aspect_ratio_scale=e=>[-e[1],e[0],e[2]])}show_canvas(){return this.init(),this.opts.element.find(".webapp-3d-note").hide(),this.opts.element.find(".webapp-3d-canvas").show()}data_url(e){return e=l(e,{type:"png",quality:void 0}),this.renderer.domElement.toDataURL(`image/${e.type}`,e.quality)}init_orbit_controls(){return null==this.camera&&this.add_camera({distance:this.opts.camera_distance}),this.controls=new THREE.OrbitControls(this.camera,this.renderer.domElement),this.controls.damping=2,this.controls.enableKeys=!1,this.controls.zoomSpeed=.4,null!=this._center&&(this.controls.target=this._center),this.opts.spin&&("boolean"==typeof this.opts.spin?this.controls.autoRotateSpeed=2:this.controls.autoRotateSpeed=this.opts.spin,this.controls.autoRotate=!0),this.controls.addEventListener("change",(()=>{if("dynamic"===this.renderer_type)return this.rescale_objects(),this.renderer.render(this.scene,this.camera)}))}add_camera(e){var t,s;if(e=l(e,{distance:10}),null==this.camera)return t=this.opts.width/this.opts.height,s=Math.max(2e4,2*e.distance),this.camera=new THREE.PerspectiveCamera(45,t,.1,s),this.scene.add(this.camera),this.camera.position.set(e.distance,e.distance,e.distance),this.camera.lookAt(this.scene.position),this.camera.up=new THREE.Vector3(0,0,1)}init_light(e=16777215){var t,s,i,n,r,a,o;for(t=new THREE.AmbientLight(4210752),this.scene.add(t),e=16777215,n=0,r=(o=[[s=1e7,s,s],[s,s,-s],[s,-s,s],[s,-s,-s],[-s,s,s],[-s,s,-s],[-s,-s,s],[-s,-s,-s]]).length;n<r;n++)a=o[n],(i=new THREE.DirectionalLight(e,.5)).position.set(a[0],a[1],a[2]).normalize(),this.scene.add(i);return this.light=new THREE.PointLight(e),this.light.position.set(0,s,0)}add_text(e){var t,s,i,n,r,a,o;return i=l(e,{pos:[0,0,0],text:u,fontsize:12,fontface:"Arial",color:"#000000",constant_size:!0}),this.show_canvas(),(t=document.createElement("canvas")).width=300,t.height=150,(s=t.getContext("2d")).font="Normal "+i.fontsize+"px "+i.fontface,s.textAlign="center",s.fillStyle=i.color,s.fillText(i.text,150,75),(o=new THREE.Texture(t)).needsUpdate=!0,o.minFilter=THREE.LinearFilter,a=new THREE.SpriteMaterial({map:o}),r=new THREE.Sprite(a),n=this.aspect_ratio_scale(i.pos),r.position.set(n[0],n[1],n[2]),i.constant_size&&(null==this._text?this._text=[r]:this._text.push(r)),this.scene.add(r),r}add_line(e){var t,s,i,n,r,a,o,h,c,d,_,p,m;if(!((d=l(e,{points:u,thickness:1,color:"#000000",arrow_head:!1})).points.length<=1)){for(this.show_canvas(),d.arrow_head&&(c=d.points.length-1,_=this.vector(d.points[c-1]),p=this.vector(d.points[c]),(s=new THREE.Vector3).subVectors(p,_),h=s.length(),s.normalize(),r=.2*(n=.2*Math.max(1,d.thickness/4)*h),this.scene.add(new THREE.ArrowHelper(s,_,h,d.color,n,r))),i=new THREE.Geometry,a=0,o=(m=d.points).length;a<o;a++)t=m[a],i.vertices.push(this.vector(t));return this.scene.add(new THREE.Line(i,new THREE.LineBasicMaterial({color:d.color,linewidth:d.thickness})))}}add_point(e){var t,s,i,n,r,a,o,h,c,_;switch(r=l(e,{loc:[0,0,0],size:5,color:"#000000"}),this.show_canvas(),null==this._points&&(this._points=[]),d){case"webgl":(s=document.createElement("canvas")).width=50,s.height=50,(i=s.getContext("2d")).beginPath(),i.arc(25,25,25,0,2*Math.PI,!1),i.fillStyle=r.color,i.fill(),(_=new THREE.Texture(s)).needsUpdate=!0,_.minFilter=THREE.LinearFilter,c=new THREE.SpriteMaterial({map:_}),o=new THREE.Sprite(c),a=this.aspect_ratio_scale(r.loc),o.position.set(a[0],a[1],a[2]),this._points.push([o,r.size/200]);break;case"canvas":t=2*Math.PI,h=function(e){return e.beginPath(),e.arc(0,0,.5,0,t,!0),e.fill()},n=new THREE.SpriteCanvasMaterial({color:new THREE.Color(r.color),program:h}),o=new THREE.Sprite(n),a=this.aspect_ratio_scale(r.loc),o.position.set(a[0],a[1],a[2]),this._points.push([o,4*r.size/this.opts.width]);break;default:throw Error(`bug -- unkown dynamic_renderer_type = ${d}`)}return this.scene.add(o)}add_obj(e){var t,s,i,n,r,a,o,h,c,l,d,_,p,u,m,f,b,w,g,v,E,y,R,T,x,H,k,j,M,z,S,$,C,L,A,F,G,B,N,P,V,I;for(this.show_canvas(),h="index_face_set"===e.type&&0!==e.has_local_colors,V=e.vertex_geometry,G=[],R=d=0,S=e.face_geometry.length;0<=S?d<S:d>S;R=0<=S?++d:--d){if(i=e.face_geometry[R].face3,n=e.face_geometry[R].face4,r=e.face_geometry[R].face5,null==(a=e.face_geometry[R].faces)&&(a=[]),null!=i)for(p=z=0,$=i.length;z<$;p=z+=3)a.push(i.slice(p,p+3));if(null!=n)for(p=B=0,C=n.length;B<C;p=B+=4)a.push(n.slice(p,p+4));if(null!=r)for(p=N=0,L=r.length;N<L;p=N+=6)a.push(r.slice(p,p+6));for(o=new THREE.Geometry,p=I=0,A=V.length;I<A;p=I+=3)o.vertices.push(this.vector(V.slice(p,p+3)));if(T=(e,t,s)=>o.faces.push(new THREE.Face3(e-1,t-1,s-1)),x=(e,t,s,i)=>{var n;return(n=new THREE.Face3(e-1,t-1,s-1)).color.setStyle(i),o.faces.push(n)},H=(e,t,s,i)=>(T(e,t,s),T(e,s,i)),k=(e,t,s,i,n)=>(x(e,t,s,n),x(e,s,i,n)),j=(e,t,s,i,n)=>(T(e,t,s),T(e,s,i),T(e,i,n)),M=(e,t,s,i,n,r)=>(T(e,t,s),T(e,s,i),T(e,i,n),T(e,n,r)),h)for(c=0,m=a.length;c<m;c++)switch((P=a[c]).length){case 4:x(...P);break;case 5:k(...P);break;default:console.log(`WARNING: rendering colored face with ${P.length-1} vertices not implemented`),k(P[0],P[1],P[2],P[3],P[-1])}else for(_=0,f=a.length;_<f;_++)switch((P=a[_]).length){case 3:T(...P);break;case 4:H(...P);break;case 5:j(...P);break;case 6:M(...P);break;default:console.log(`WARNING: rendering face with ${P.length} vertices not implemented`),M(...P)}for(o.mergeVertices(),o.computeFaceNormals(),o.computeBoundingSphere(),y=e.face_geometry[R].material_name,E=0,l=u=0,F=e.material.length-1;0<=F?u<=F:u>=F;l=0<=F?++u:--u)if(y===e.material[l].name){E=l;break}this.opts.wireframe||e.wireframe?(s=e.color?e.color:`rgb(${255*(t=e.material[E].color)[0]},${255*t[1]},${255*t[2]})`,b="number"==typeof e.wireframe?e.wireframe:"number"==typeof this.opts.wireframe?this.opts.wireframe:1,g=new THREE.MeshBasicMaterial({wireframe:!0,color:s,wireframeLinewidth:b,side:THREE.DoubleSide})):null==e.material[E]?(console.log("BUG -- couldn't get material for ",e),g=new THREE.MeshBasicMaterial({wireframe:!1,color:"#000000"})):(w=e.material[E],h?g=new THREE.MeshPhongMaterial({shininess:"1",wireframe:!1,transparent:w.opacity<1,vertexColors:THREE.FaceColors}):(g=new THREE.MeshPhongMaterial({shininess:"1",wireframe:!1,transparent:w.opacity<1})).color.setRGB(w.color[0],w.color[1],w.color[2]),g.specular.setRGB(w.specular[0],w.specular[1],w.specular[2]),g.opacity=w.opacity,g.side=THREE.DoubleSide),(v=new THREE.Mesh(o,g)).position.set(0,0,0),G.push(this.scene.add(v))}return G}set_frame(e){var t,s,i,n,r,a,o,h,c,d,_,p,m,f,b,w,g,v,E,y,R,T,x,H,k,j,M;if(p=l(e,{xmin:u,xmax:u,ymin:u,ymax:u,zmin:u,zmax:u,color:this.opts.foreground,thickness:.4,labels:!0,fontsize:14,draw:!0}),this.show_canvas(),this._frame_params=p,T=p.xmin,x=p.xmax,H=p.ymin,k=p.ymax,j=p.zmin,M=p.zmax,Math.abs(x-T)<.1&&(x+=1,T-=1),Math.abs(k-H)<.1&&(k+=1,H-=1),Math.abs(M-j)<.1&&(M+=1,j-=1),c=(T+x)/2,d=(H+k)/2,_=(j+M)/2,this._center=this.vector3(c,d,_),null!=this.camera&&(t=1.5*Math.max(...this.aspect_ratio_scale([x-T,k-H,M-j])),this.camera.position.set(c+t,d+t,_+t/2)),p.draw){if(null!=this.frame){for(i=0,r=(w=this.frame).length;i<r;i++)R=w[i],this.scene.remove(R);delete this.frame}for(this.frame=[],b=0,a=(y=[[[T,H,j],[x,H,j],[x,k,j],[T,k,j],[T,H,j],[T,H,M],[x,H,M],[x,k,M],[T,k,M],[T,H,M]],[[x,H,j],[x,H,M]],[[T,k,j],[T,k,M]],[[x,k,j],[x,k,M]]]).length;b<a;b++)f=y[b],h=this.add_line({points:f,color:p.color,thickness:p.thickness}),this.frame.push(h)}if(p.draw&&p.labels){if(null!=this._frame_labels)for(v=0,o=(g=this._frame_labels).length;v<o;v++)R=g[v],this.scene.remove(R);this._frame_labels=[],n=function(e,t){return(1*(null==t?e:(e+t)/2).toFixed(2)).toString()},E=(e,t,s,i)=>this._frame_labels.push(this.add_text({pos:[e,t,s],text:i,fontsize:p.fontsize,color:p.color,constant_size:!1})),m=.15,p.draw&&(E(T-(s=(x-T)*m),H,j,n(j)),E(T-s,H,_,`z = ${n(j,M)}`),E(T-s,H,M,n(M)),E(x+(s=(x-T)*m),H,j,n(H)),E(x+s,d,j,`y = ${n(H,k)}`),E(x+s,k,j,n(k)),E(x,H-(s=(k-H)*m),j,n(x)),E(c,H-s,j,`x = ${n(T,x)}`),E(T,H-s,j,n(T)))}return y=this.vector3(c,d,_),this.camera.lookAt(y),null!=this.controls&&(this.controls.target=this._center),this.render_scene()}add_3dgraphics_obj(e){var t,s,i,n,r;for(e=l(e,{obj:u,wireframe:void 0,set_frame:void 0}),this.show_canvas(),s=0,i=(r=e.obj).length;s<i;s++){n=r[s];try{switch(n.type){case"text":this.add_text({pos:n.pos,text:n.text,color:n.color,fontsize:n.fontsize,fontface:n.fontface,constant_size:n.constant_size});break;case"index_face_set":null!=e.wireframe&&(n.wireframe=e.wireframe),this.add_obj(n),n.mesh&&!n.wireframe&&(n.color="#000000",n.wireframe=n.mesh,this.add_obj(n));break;case"line":delete n.type,this.add_line(n);break;case"point":delete n.type,this.add_point(n);break;default:return void console.log(`ERROR: no renderer for model number = ${n.id}`)}}catch(e){t=e,console.warn(`WARNING -- ${t}`)}}return null!=e.set_frame&&this.set_frame(e.set_frame),this.render_scene(!0)}animate(e={}){if(e=l(e,{fps:void 0,stop:!1,mouseover:void 0,render:!0}),!this._animate_started||e.stop)return this._animate_started=!0,this._animate(e)}_animate(e){var t;if("static"!==this.renderer_type)if(this.opts.element.is(":visible")){if(!e.stop)return this._stop_animating?(this._stop_animating=!1,void(this._animate_started=!1)):(this.render_scene(e.render),delete e.render,t=()=>requestAnimationFrame((()=>this._animate(e))),null!=e.fps&&e.fps?setTimeout(t,1e3/e.fps):t());this._stop_animating=!0}else null==this.opts.stop_when_gone||i.contains(document,this.opts.stop_when_gone)?i.contains(document,this.opts.element[0])?setTimeout((()=>this._animate(e)),1e3):setTimeout((()=>this._animate(e)),5e3):this._animate_started=!1;else this._animate_started=!1}render_scene(e=!1){var t,s,i;if("static"!==this.renderer_type){if(null!=this.camera&&(null!=(i=this.controls)&&i.update(),s=this.camera.position,null==this._last_pos?(t=!0,this._last_pos=s.clone()):this._last_pos.distanceToSquared(s)>.05?(t=!0,this._last_pos.copy(s)):t=!1,t||e))return this.rescale_objects(),this.renderer.render(this.scene,this.camera)}else console.log("render static -- not implemented yet")}_rescale_factor(){return null==this._center?void 0:this.camera.position.distanceTo(this._center)/3}rescale_objects(e=!1){var t,s,i,n,r,a,o,h,c,l,d,_,p;if(!(null==(d=this._rescale_factor())||Math.abs(this._last_scale-d)<1e-6&&!e)){if(this._last_scale=d,null!=this._text)for(s=0,i=(o=this._text).length;s<i;s++)o[s].scale.set(d,d,d);if(null!=this._frame_labels)for(a=0,n=(h=this._frame_labels).length;a<n;a++)h[a].scale.set(d,d,d);if(null!=this._points){for(l=[],_=0,r=(c=this._points).length;_<r;_++)t=(p=c[_])[1],l.push(p[0].scale.set(d*t,d*t,d*t));return l}}}},t.render_3d_scene=function(e){var t,s;if(null!=(e=l(e,{url:void 0,scene:void 0,element:u,cb:void 0})).scene||null!=e.url)return s=void 0,t=i(".webapp-3d-templates .webapp-3d-loading").clone(),e.element.append(t),h.series([s=>{var n;return null!=e.scene?s():(n=function(s){return i.ajax({url:e.url,timeout:3e4,success:function(i){try{return e.scene=p.from_json(i),s()}catch(e){return t=e,console.log("ERROR",t),s(t)}}}).fail((function(){return console.log("FAIL"),s(!0)}))},p.retry_until_success({f:n,max_tries:10,max_delay:5,cb:function(t){var i;return t?(i=`error downloading ${e.url} - ${t}`,console.warn(i),s(i)):s()}}))},i=>{var n;return t.remove(),n=function(t,n){return t?i(t):(s=n,n.init(),n.add_3dgraphics_obj({obj:e.scene.obj}),n.init_done(),i())},e.scene.opts.cb=n,e.element.webapp_threejs(e.scene.opts)}],(function(t){return"function"==typeof e.cb?e.cb(t,s):void 0}));"function"==typeof e.cb&&e.cb("one of url or scene must be defined")},i.fn.webapp_threejs=function(e={}){return this.each((function(){var t,s,n;return s=i(this),t=i(".webapp-3d-templates .webapp-3d-viewer").clone(),s.empty().append(t),t.find(".webapp-3d-canvas").hide(),e.element=t,e.container=s,e.stop_when_gone=t.closest(".webapp-editor-codemirror")[0],n=function(){var t;return t=new r(e),s.data("webapp-threejs",t)},"undefined"==typeof THREE||null===THREE?load_threejs((t=>{var s;return t?(s=`Error loading THREE.js -- ${t}`,null==e.cb?console.log(s):"function"==typeof e.cb?e.cb(s):void 0):n()})):n()}))}}}]);