+
+
+小于 1 分钟
404
页面不存在
这 是 四 零 四 !
3D Tiles 是 Cesium 于 2016 年 3 月定义的一种三维模型瓦片数据格式，目前已经是 OGC 标准之一，3D Tiles 将海量三维数据以分块分层的形式组织起来，大大减轻了浏览器和 GPU 的负担。
3D Tiles 专为流式传输和渲染 3D 地理数据而设计的，如倾斜摄影测量、BIM、点云、建筑数据等。特点有：
开放且灵活。 3D Tiles 作为开放数据规范，其切片方案灵活可变，三维模型的切片大小和覆盖范围可以人为设置。此外，3D Tiles 还可以适配三维空间中多种空间分区方案，如四叉树、八叉树、KD 树等。
异质性支持。 通过一组已定义的文件格式，将多种三维地理空间要素（如倾斜摄影测量、BIM、点云、建筑数据、实例化要素等）转换为三维形式的单个数据集，同时又允许多种不同格式标准的模型显示在同一场景中。
专为三维可视化设计。 3D Tiles 建立在 gltf 格式之上，并引入了三维图形学技术，以树状的层级细节模型（HLOD）进行组织，降低海量数据可视化过程中的浏览器负担，减少 WebGL 绘制请求的数量。
可交互。 3D Tiles 支持交互旋转和样式的设置。如单击高亮，修改单个模型的材质，根据属性信息设置不同的显示效果等。
<template>
+ <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+
+async function init() {
+ const viewer = new Cesium.Viewer(cesiumContainer, { infoBox: false });
+ const tileset = await Cesium.Cesium3DTileset.fromUrl("./data/tileset.json");
+ viewer.scene.primitives.add(tileset);
+ viewer.zoomTo(tileset);
+}
+
+onMounted(() => {
+ init();
+});
+</script>
+
+<template>
+ <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
+</template>
+
+<style scoped></style>
+3dTiles 规范仓库：https://github.com/CesiumGS/3d-tiles
本文数据下载地址：https://github.com/CesiumGS/3d-tiles-samples
3dTiles 格式介绍：https://blog.csdn.net/whl0071/article/details/126000225
![\\"\\"](\\"https://files.sunguoqi.com/brain-images/202308101438111.png\\")
3D Tiles 是 Cesium 于 2016 年 3 月定义的一种三维模型瓦片数据格式，目前已经是 OGC 标准之一，3D Tiles 将海量三维数据以分块分层的形式组织起来，大大减轻了浏览器和 GPU 的负担。
\\n3D Tiles 专为流式传输和渲染 3D 地理数据而设计的，如倾斜摄影测量、BIM、点云、建筑数据等。特点有：
","autoDesc":true}');export{r as comp,k as data}; diff --git a/assets/40.html-Bugt77d-.js b/assets/40.html-Bugt77d-.js new file mode 100644 index 00000000..1669a582 --- /dev/null +++ b/assets/40.html-Bugt77d-.js @@ -0,0 +1 @@ +import{_ as t,o as e,c as o}from"./app-CUIEYs6a.js";const a={};function r(c,i){return e(),o("div")}const m=t(a,[["render",r],["__file","40.html.vue"]]),p=JSON.parse('{"path":"/dv/basic/data/40.html","title":"整理自己的可视化工具集","lang":"zh-CN","frontmatter":{"title":"整理自己的可视化工具集","icon":"note","order":41,"description":"","head":[["meta",{"property":"og:url","content":"https://brain.songxingguo.com/dv/basic/data/40.html"}],["meta",{"property":"og:site_name","content":"宋玉的世界"}],["meta",{"property":"og:title","content":"整理自己的可视化工具集"}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2024-04-22T03:38:06.000Z"}],["meta",{"property":"article:modified_time","content":"2024-04-22T03:38:06.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"整理自己的可视化工具集\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2024-04-22T03:38:06.000Z\\",\\"author\\":[]}"]]},"headers":[],"git":{"createdTime":1713757086000,"updatedTime":1713757086000,"contributors":[{"name":"宋兴国","email":"1328989942@qq.com","commits":1}]},"readingTime":{"minutes":0.05,"words":16},"filePathRelative":"dv/basic/data/40.md","localizedDate":"2024年4月22日","excerpt":"","autoDesc":true}');export{m as comp,p as data}; diff --git a/assets/404.html-CHybrDMd.js b/assets/404.html-CHybrDMd.js new file mode 100644 index 00000000..2218646e --- /dev/null +++ b/assets/404.html-CHybrDMd.js @@ -0,0 +1 @@ +import{_ as t,o as e,c as o,a as n}from"./app-CUIEYs6a.js";const a={},r=n("p",null,"404 Not Found",-1),c=[r];function p(s,i){return e(),o("div",null,c)}const d=t(a,[["render",p],["__file","404.html.vue"]]),m=JSON.parse('{"path":"/404.html","title":"","lang":"zh-CN","frontmatter":{"layout":"NotFound","description":"404 Not Found ","head":[["meta",{"property":"og:url","content":"https://brain.songxingguo.com/404.html"}],["meta",{"property":"og:site_name","content":"宋玉的世界"}],["meta",{"property":"og:description","content":"404 Not Found "}],["meta",{"property":"og:type","content":"website"}],["meta",{"property":"og:locale","content":"zh-CN"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"WebPage\\",\\"name\\":\\"\\",\\"description\\":\\"404 Not Found \\"}"]]},"headers":[],"git":{},"readingTime":{"minutes":0.01,"words":3},"filePathRelative":null,"excerpt":"404 Not Found
\\n","autoDesc":true}');export{d as comp,m as data}; diff --git a/assets/Animation.html-BMuyJfTI.js b/assets/Animation.html-BMuyJfTI.js new file mode 100644 index 00000000..38203457 --- /dev/null +++ b/assets/Animation.html-BMuyJfTI.js @@ -0,0 +1 @@ +import{_ as m,r as n,o as _,c as p,a as e,b as r,d as t}from"./app-CUIEYs6a.js";const g={},f={id:"_3d-盒子练习",tabindex:"-1"},u={class:"header-anchor",href:"#_3d-盒子练习"},x={href:"https://brain.songxingguo.com/demo/CSSAnimation/ThreeDBox.html",target:"_blank",rel:"noopener noreferrer"},b={id:"_3d-盒子炸开练习",tabindex:"-1"},S={class:"header-anchor",href:"#_3d-盒子炸开练习"},k={href:"https://brain.songxingguo.com/demo/CSSAnimation/BlowBox.html",target:"_blank",rel:"noopener noreferrer"},D={id:"_3d-盒子展开练习",tabindex:"-1"},C={class:"header-anchor",href:"#_3d-盒子展开练习"},T={href:"https://brain.songxingguo.com/demo/CSSAnimation/ExpandBox.html",target:"_blank",rel:"noopener noreferrer"},B={id:"风车练习",tabindex:"-1"},y={class:"header-anchor",href:"#风车练习"},v={href:"https://brain.songxingguo.com/demo/CSSAnimation/Windmill.html",target:"_blank",rel:"noopener noreferrer"},A={id:"倾斜的导航",tabindex:"-1"},E={class:"header-anchor",href:"#倾斜的导航"},N={href:"https://brain.songxingguo.com/demo/CSSAnimation/TiltNavigation.html",target:"_blank",rel:"noopener noreferrer"},w={id:"时钟练习",tabindex:"-1"},Z={class:"header-anchor",href:"#时钟练习"},I={href:"https://brain.songxingguo.com/demo/CSSAnimation/Clock.html",target:"_blank",rel:"noopener noreferrer"},M={id:"fir-im-网站",tabindex:"-1"},O={class:"header-anchor",href:"#fir-im-网站"},q={href:"https://brain.songxingguo.com/demo/CSSAnimation/FirIm.html",target:"_blank",rel:"noopener noreferrer"};function z(F,P){const o=n("ExternalLinkIcon"),i=n("ThreeDBox"),a=n("BlowBox"),s=n("ExpandBox"),l=n("Windmill"),c=n("TiltNavigation"),d=n("Clock"),h=n("FirIm");return _(),p("div",null,[e("h3",f,[e("a",u,[e("span",null,[e("a",x,[r("3D 盒子练习"),t(o)])])])]),t(i),e("h3",b,[e("a",S,[e("span",null,[e("a",k,[r("3D 盒子炸开练习"),t(o)])])])]),t(a),e("h3",D,[e("a",C,[e("span",null,[e("a",T,[r("3D 盒子展开练习"),t(o)])])])]),t(s),e("h3",B,[e("a",y,[e("span",null,[e("a",v,[r("风车练习"),t(o)])])])]),t(l),e("h3",A,[e("a",E,[e("span",null,[e("a",N,[r("倾斜的导航"),t(o)])])])]),t(c),e("h3",w,[e("a",Z,[e("span",null,[e("a",I,[r("时钟练习"),t(o)])])])]),t(d),e("h3",M,[e("a",O,[e("span",null,[e("a",q,[r("fir.im 网站"),t(o)])])])]),t(h)])}const W=m(g,[["render",z],["__file","Animation.html.vue"]]),L=JSON.parse('{"path":"/web/frontend/css/Animation.html","title":"CSS动画DEMO","lang":"zh-CN","frontmatter":{"title":"CSS动画DEMO","icon":"qianduan","order":1,"author":"宋玉","date":"2024-02-20T00:00:00.000Z","category":["前端开发"],"description":"3D 盒子练习 ","head":[["meta",{"property":"og:url","content":"https://brain.songxingguo.com/web/frontend/css/Animation.html"}],["meta",{"property":"og:site_name","content":"宋玉的世界"}],["meta",{"property":"og:title","content":"CSS动画DEMO"}],["meta",{"property":"og:description","content":"3D 盒子练习 "}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2024-04-22T03:38:06.000Z"}],["meta",{"property":"article:author","content":"宋玉"}],["meta",{"property":"article:published_time","content":"2024-02-20T00:00:00.000Z"}],["meta",{"property":"article:modified_time","content":"2024-04-22T03:38:06.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"CSS动画DEMO\\",\\"image\\":[\\"\\"],\\"datePublished\\":\\"2024-02-20T00:00:00.000Z\\",\\"dateModified\\":\\"2024-04-22T03:38:06.000Z\\",\\"author\\":[{\\"@type\\":\\"Person\\",\\"name\\":\\"宋玉\\"}]}"]]},"headers":[{"level":3,"title":"3D 盒子练习","slug":"_3d-盒子练习","link":"#_3d-盒子练习","children":[]},{"level":3,"title":"3D 盒子炸开练习","slug":"_3d-盒子炸开练习","link":"#_3d-盒子炸开练习","children":[]},{"level":3,"title":"3D 盒子展开练习","slug":"_3d-盒子展开练习","link":"#_3d-盒子展开练习","children":[]},{"level":3,"title":"风车练习","slug":"风车练习","link":"#风车练习","children":[]},{"level":3,"title":"倾斜的导航","slug":"倾斜的导航","link":"#倾斜的导航","children":[]},{"level":3,"title":"时钟练习","slug":"时钟练习","link":"#时钟练习","children":[]},{"level":3,"title":"fir.im 网站","slug":"fir-im-网站","link":"#fir-im-网站","children":[]}],"git":{"createdTime":1713757086000,"updatedTime":1713757086000,"contributors":[{"name":"宋兴国","email":"1328989942@qq.com","commits":1}]},"readingTime":{"minutes":0.28,"words":84},"filePathRelative":"web/frontend/css/Animation.md","localizedDate":"2024年2月20日","excerpt":"首先是分别创建场景、相机和渲染器，三者缺一不可，并将渲染器渲染的结果挂载到 DOM 元素上。最后将在render函数绑定到requestAnimationFrame上, 并执行渲染函数，每次重绘都会重新执行render函数。
// 创建场景
+const scene = new THREE.Scene();
+// 创建相机
+const camera = new THREE.PerspectiveCamera(
+ 75,
+ window.innerWidth / window.innerHeight,
+ 0.1,
+ 1000
+);
+
+// 创建渲染器
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.getElementById("root").appendChild(renderer.domElement);
+
+// 渲染
+function render() {
+ requestAnimationFrame(render);
+ renderer.render(scene, camera);
+}
+render();
+上面的场景都搭建好了，现在创建一个正方体，并将它加入到场景中。
// 创建几何体
+const geometry = new THREE.BoxGeometry(1, 1, 1);
+const material = new THREE.MeshBasicMaterial({ color: 0x00ffff });
+const cube = new THREE.Mesh(geometry, material);
+scene.add(cube);
+也可以为场景中添加辅助坐标和辅助相机，能让我们更清楚的观察到当前元素在坐标系中所处的位置和大小。
// 创建辅助坐标轴
+const axes = new THREE.AxesHelper(1000);
+scene.add(axes);
+
+// 创建辅助相机
+const helper = new THREE.CameraHelper(camera);
+scene.add(helper);
+场景中拥有了正方体，但我能并不能和它进行交互，因此需要 OrbitControls 来对场景中的内容能控制。需要注意的是 OrbitControls 是一个控制插件，并没有在 Three.js 的核心模块中，而是在examples/jsm/controls/ 文件夹中，我们这里为了方便使用采用的是 CDN 的方式进行引入。
import { OrbitControls } from "https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js";
+// 模型控制
+const controls = new OrbitControls(camera, renderer.domElement);
+首先是分别创建场景、相机和渲染器，三者缺一不可，并将渲染器渲染的结果挂载到 DOM 元素上。最后将在render函数绑定到requestAnimationFrame上, 并执行渲染函数，每次重绘都会重新执行render函数。
![\\"\\"](\\"https://files.sunguoqi.com/brain-images/202307271613330.png\\")
![\\"\\"](\\"https://files.sunguoqi.com/brain-images/202307271452140.png\\")
3D Tiles 是 Cesium 于 2016 年 3 月定义的一种三维模型瓦片数据格式，目前已经是 OGC 标准之一，3D Tiles 将海量三维数据以分块分层的形式组织起来，大大减轻了浏览器和 GPU 的负担。
+3D Tiles 专为流式传输和渲染 3D 地理数据而设计的，如倾斜摄影测量、BIM、点云、建筑数据等。特点有：
`,r:{minutes:1.7,words:509},y:"a",t:"3D Tiles",i:"post",O:3}}],["/dv/cesium/data/geojson.html",{loader:()=>x(()=>import("./geojson.html-C_mORFwW.js"),__vite__mapDeps([])),meta:{a:"宋玉",d:16913664e5,l:"2023年8月7日",c:["Cesium","数据可视化"],g:["GeoJson"],e:`
GeoJSON 是一种对各种地理数据结构进行编码的格式，是基于 JavaScript 对象表示法（JavaScript Object Notation，JSON）的地理空间信息数据交换格式。
+GeoJSON 对象可以表示几何特征或特征集合，并且支持点、线、面、多点、多线、多面和几何集合等几何类型。
`,r:{minutes:.78,words:234},y:"a",t:"GeoJson",i:"post",O:2}}],["/dv/cesium/data/gltf.html",{loader:()=>x(()=>import("./gltf.html-CZbh-JJz.js"),__vite__mapDeps([])),meta:{a:"宋玉",d:16913664e5,l:"2023年8月7日",c:["Cesium","数据可视化"],g:["glTF","数据加载"],e:`
glTF（GL Transmission Format），即图形语言交换格式，是一种 3D 内容的格式标准，其本质是一个 JSON 文件。该文件描述了整个 3D 场景的内容，包含了对场景结构进行描述的场景图。场景中的 3D 对象通过场景节点引用网格进行定义[1]。材质定义了 3D 对象的外观，动画定义了 3D 对象的变换操作（如选择、平移操作）。
`,r:{minutes:.92,words:277},y:"a",t:"glTF",i:"post",O:4}}],["/dv/cesium/data/imagery.html",{loader:()=>x(()=>import("./imagery.html-B_HqSLW3.js"),__vite__mapDeps([])),meta:{a:"宋玉",d:16913664e5,l:"2023年8月7日",c:["Cesium","数据可视化"],g:["GIS","影像加载"],e:`
Cesium 是一个基于 JavaScript 的开源三维 GIS 框架，可以用于创建具有绝佳性能、精度、视觉质量和易用性的世界级三维地球仪和地图。
+Cesium 支持多种数据可视化方式，可以用于绘制各种几何图形、导入图片及三维模型。其图形是通过 WebGL 加载的，不需要任何插件支持即可使用，只要用户使用的浏览器支持 WebGL，就可以直接使用。
`,r:{minutes:1.18,words:354},y:"a",t:"简介",i:"post",O:1}}],["/dv/cesium/material/video.html",{loader:()=>x(()=>import("./video.html-CyJWwpUx.js"),__vite__mapDeps([])),meta:{a:"宋玉",d:16913664e5,l:"2023年8月7日",c:["Cesium","数据可视化"],g:["工具应用"],r:{minutes:.09,words:28},y:"a",t:"视频材质",i:"post",O:1}}],["/dv/cesium/start/hello_cesium.html",{loader:()=>x(()=>import("./hello_cesium.html-jTZ9rTDH.js"),__vite__mapDeps([])),meta:{a:"宋玉",d:16910208e5,l:"2023年8月3日",c:["Cesium","数据可视化"],g:["三维","GIS","快速上手"],e:`
打开终端，输入下面这行命令创建一个 Vite 项目。
+npm create vite@latest
+首先是分别创建场景、相机和渲染器，三者缺一不可，并将渲染器渲染的结果挂载到 DOM 元素上。最后将在render函数绑定到requestAnimationFrame上, 并执行渲染函数，每次重绘都会重新执行render函数。
官方还没发布
+`,r:{minutes:.11,words:33},y:"a",t:"尽情期待",i:"post",O:1}}],["/dv/visactor/vgrammar/test.html",{loader:()=>x(()=>import("./test.html-BRv8LFvg.js"),__vite__mapDeps([])),meta:{a:"宋玉",d:16913664e5,l:"2023年8月7日",c:["Cesium","数据可视化"],g:["3D"],r:{minutes:.1,words:29},y:"a",t:"3D Tiles 模型高度调整",i:"post",O:1}}],["/dv/visactor/vgraph/test.html",{loader:()=>x(()=>import("./test.html-bdS8zpeV.js"),__vite__mapDeps([])),meta:{a:"宋玉",d:16913664e5,l:"2023年8月7日",c:["数据可视化"],g:["图表"],r:{minutes:.08,words:25},y:"a",t:"尽情期待",i:"post",O:1}}],["/dv/visactor/vrender/wip.html",{loader:()=>x(()=>import("./wip.html-gyqEVntV.js"),__vite__mapDeps([])),meta:{a:"宋玉",d:16913664e5,l:"2023年8月7日",c:["Cesium","数据可视化"],g:["3D"],r:{minutes:.1,words:29},y:"a",t:"3D Tiles 模型高度调整",i:"post",O:1}}],["/dv/visactor/vtable/wip.html",{loader:()=>x(()=>import("./wip.html-CbjsZYrz.js"),__vite__mapDeps([])),meta:{a:"宋玉",d:16913664e5,l:"2023年8月7日",c:["Cesium","数据可视化"],g:["3D"],r:{minutes:.1,words:29},y:"a",t:"3D Tiles 模型高度调整",i:"post",O:1}}],["/web/backend/todo/",{loader:()=>x(()=>import("./index.html-CJsVb1-x.js"),__vite__mapDeps([])),meta:{a:"宋玉",d:16940448e5,l:"2023年9月7日",r:{minutes:.04,words:13},y:"a",t:"ToDo",i:"post"}}],["/web/frontend/css/Animation.html",{loader:()=>x(()=>import("./Animation.html-BMuyJfTI.js"),__vite__mapDeps([])),meta:{a:"宋玉",d:17083872e5,l:"2024年2月20日",c:["前端开发"],e:`此浏览器不支持嵌入式 PDF。请下载 PDF 查看：下载 PDF
"}};const Ha=e=>{console.error(`[PDF]: ${e}`)},o2=e=>{for(;e.firstChild;)e.removeChild(e.firstChild)},a2=e=>e==="string"?document.querySelector(e):e instanceof HTMLElement?e:document.body,s2=e=>{let t="";return e&&(t+=Zt(e).map(([n,r])=>n==="noToolbar"?`toolbar=${r?0:1}`:`${encodeURIComponent(n)}=${encodeURIComponent(r)}`).join("&"),t&&(t=`#${t.slice(0,t.length-1)}`)),t},i2=(e,t,n,r,o)=>{o2(t);const a=`${e==="pdfjs"?`${ti(Ie(null))}web/viewer.html?file=${encodeURIComponent(n)}`:n}${s2(r)}`,s=e==="pdfjs"||e==="iframe"?"iframe":"embed",i=document.createElement(s);return i.className="pdf-viewer",i.type="application/pdf",i.title=o,i.src=a,i instanceof HTMLIFrameElement&&(i.allow="fullscreen"),t.classList.add("pdf-viewer-container"),t.appendChild(i),t.getElementsByTagName(s)[0]},l2=(e,t,{title:n,hint:r,options:o={}})=>{var m,b;if(typeof window>"u"||!((m=window==null?void 0:window.navigator)!=null&&m.userAgent))return null;const{navigator:a}=window,{userAgent:s}=a,i=ii(window.Promise),c=Sd(s)||dv(s),u=!c&&fv(s),d=!c&&/firefox/iu.test(s)&&s.split("rv:").length>1?parseInt(s.split("rv:")[1].split(".")[0],10)>18:!1,f=!c&&(i||d);if(!Me(e))return Ha("URL is not valid"),null;const p=a2(t);if(!p)return Ha("Target element cannot be determined"),null;const h=n||((b=/\/([^/]+).pdf/.exec(e))==null?void 0:b[1])||"PDF Viewer";return f||!c?i2(u?"iframe":"embed",p,e,o,h):(p.innerHTML=r.replace(/\[url\]/g,e),Ha("This browser does not support embedded PDFs"),null)};var c2=D({name:"PDF",props:{url:{type:String,required:!0},title:{type:String,default:""},width:{type:[String,Number],default:"100%"},height:{type:[String,Number],default:void 0},ratio:{type:[String,Number],default:16/9},page:{type:[String,Number],default:1},noToolbar:Boolean,zoom:{type:[String,Number],default:100}},setup(e){const{el:t,width:n,height:r,resize:o}=Qr(e),a=Jt(r2);return G(()=>{l2(un(e.url),t.value,{title:e.title,hint:a.value.hint,options:{page:e.page,noToolbar:e.noToolbar,zoom:e.zoom}}),o()}),()=>l("div",{class:"pdf-viewer-wrapper",ref:t,style:{width:n.value,height:r.value}})}}),u2=D({name:"Replit",props:{link:{type:String,default:""},user:{type:String,default:""},repl:{type:String,default:""},width:{type:[String,Number],default:"100%"},height:{type:[String,Number],default:void 0},ratio:{type:[String,Number],default:16/9},theme:{type:String,default:"light"},file:{type:String,default:()=>null},autoLoad:Boolean,text:{type:String,default:"Load Replit"}},setup(e){const{el:t,width:n,height:r,resize:o}=Qr(e),a=I(!1),s=I(!1),i=w(()=>{var c;if(e.link){const u=new URL(e.link);return u.searchParams.set("embed","true"),u.toString()}return e.user&&e.repl?`https://replit.com/@${e.user}/${e.repl}${(c=e.file)!=null&&c.length?`#${e.file}`:""}`:null});return()=>i.value?l("div",{class:"replit-wrapper"},e.autoLoad||a.value?[l("iframe",{ref:t,class:"replit-iframe",src:i.value,style:{width:n.value,height:s.value?r.value:0},onLoad:()=>{s.value=!0,o()}}),s.value?null:l(At)]:l("button",{type:"button",class:"replit-button",onClick:()=>{a.value=!0}},e.text)):null}});const d2=500,f2=20,p2=300,h2="https://stackblitz.com",ic=["angular-cli","create-react-app","html","javascript","node","polymer","typescript","vue"],m2=["project","search","ports","settings"],v2=["light","dark"],g2=["editor","preview"],lc={clickToLoad:e=>Bn("ctl",e),devToolsHeight:e=>cc("devtoolsheight",e),forceEmbedLayout:e=>Bn("embed",e),hideDevTools:e=>Bn("hidedevtools",e),hideExplorer:e=>Bn("hideExplorer",e),hideNavigation:e=>Bn("hideNavigation",e),openFile:e=>uc("file",e),showSidebar:e=>b2("showSidebar",e),sidebarView:e=>Fa("sidebarView",e,m2),startScript:e=>uc("startScript",e),terminalHeight:e=>cc("terminalHeight",e),theme:e=>Fa("theme",e,v2),view:e=>Fa("view",e,g2),zenMode:e=>Bn("zenMode",e)};function Hd(e={}){const t=Object.entries(e).map(([n,r])=>r!=null&&lc.hasOwnProperty(n)?lc[n](r):"").filter(Boolean);return t.length?`?${t.join("&")}`:""}function Bn(e,t){return t===!0?`${e}=1`:""}function b2(e,t){return typeof t=="boolean"?`${e}=${t?"1":"0"}`:""}function cc(e,t){if(typeof t=="number"&&!Number.isNaN(t)){const n=Math.min(100,Math.max(0,t));return`${e}=${encodeURIComponent(Math.round(n))}`}return""}function Fa(e,t="",n=[]){return n.includes(t)?`${e}=${encodeURIComponent(t)}`:""}function uc(e,t){return(Array.isArray(t)?t:[t]).filter(r=>typeof r=="string"&&r.trim()!=="").map(r=>`${e}=${encodeURIComponent(r)}`).join("&")}function Fd(){return Math.random().toString(36).slice(2,6)+Math.random().toString(36).slice(2,6)}function hi(e,t){return`${zd(t)}${e}${Hd(t)}`}function mi(e,t){const n={forceEmbedLayout:!0};return t&&typeof t=="object"&&Object.assign(n,t),`${zd(n)}${e}${Hd(n)}`}function zd(e={}){return(typeof e.origin=="string"?e.origin:h2).replace(/\/$/,"")}function vi(e,t,n){if(!t||!e||!e.parentNode)throw new Error("Invalid Element");e.id&&(t.id=e.id),e.className&&(t.className=e.className),y2(t,n),e.replaceWith(t)}function gi(e){if(typeof e=="string"){const t=document.getElementById(e);if(!t)throw new Error(`Could not find element with id '${e}'`);return t}else if(e instanceof HTMLElement)return e;throw new Error(`Invalid element: ${e}`)}function bi(e){return e&&e.newWindow===!1?"_self":"_blank"}function y2(e,t={}){const n=Object.hasOwnProperty.call(t,"height")?`${t.height}`:`${p2}`,r=Object.hasOwnProperty.call(t,"width")?`${t.width}`:void 0;e.setAttribute("height",n),r?e.setAttribute("width",r):e.setAttribute("style","width:100%;")}class _2{constructor(t){this.pending={},this.port=t,this.port.onmessage=this.messageListener.bind(this)}request({type:t,payload:n}){return new Promise((r,o)=>{const a=Fd();this.pending[a]={resolve:r,reject:o},this.port.postMessage({type:t,payload:{...n,__reqid:a}})})}messageListener(t){var i;if(typeof((i=t.data.payload)==null?void 0:i.__reqid)!="string")return;const{type:n,payload:r}=t.data,{__reqid:o,__success:a,__error:s}=r;this.pending[o]&&(a?this.pending[o].resolve(this.cleanResult(r)):this.pending[o].reject(s?`${n}: ${s}`:n),delete this.pending[o])}cleanResult(t){const n={...t};return delete n.__reqid,delete n.__success,delete n.__error,Object.keys(n).length?n:null}}class w2{constructor(t,n){this.editor={openFile:r=>this._rdc.request({type:"SDK_OPEN_FILE",payload:{path:r}}),setCurrentFile:r=>this._rdc.request({type:"SDK_SET_CURRENT_FILE",payload:{path:r}}),setTheme:r=>this._rdc.request({type:"SDK_SET_UI_THEME",payload:{theme:r}}),setView:r=>this._rdc.request({type:"SDK_SET_UI_VIEW",payload:{view:r}}),showSidebar:(r=!0)=>this._rdc.request({type:"SDK_TOGGLE_SIDEBAR",payload:{visible:r}})},this.preview={origin:"",getUrl:()=>this._rdc.request({type:"SDK_GET_PREVIEW_URL",payload:{}}).then(r=>(r==null?void 0:r.url)??null),setUrl:(r="/")=>{if(typeof r!="string"||!r.startsWith("/"))throw new Error(`Invalid argument: expected a path starting with '/', got '${r}'`);return this._rdc.request({type:"SDK_SET_PREVIEW_URL",payload:{path:r}})}},this._rdc=new _2(t),Object.defineProperty(this.preview,"origin",{value:typeof n.previewOrigin=="string"?n.previewOrigin:null,writable:!1})}applyFsDiff(t){const n=r=>r!==null&&typeof r=="object";if(!n(t)||!n(t.create))throw new Error("Invalid diff object: expected diff.create to be an object.");if(!Array.isArray(t.destroy))throw new Error("Invalid diff object: expected diff.destroy to be an array.");return this._rdc.request({type:"SDK_APPLY_FS_DIFF",payload:t})}getDependencies(){return this._rdc.request({type:"SDK_GET_DEPS_SNAPSHOT",payload:{}})}getFsSnapshot(){return this._rdc.request({type:"SDK_GET_FS_SNAPSHOT",payload:{}})}}const Oo=[];class x2{constructor(t){this.id=Fd(),this.element=t,this.pending=new Promise((n,r)=>{const o=({data:u,ports:d})=>{(u==null?void 0:u.action)==="SDK_INIT_SUCCESS"&&u.id===this.id&&(this.vm=new w2(d[0],u.payload),n(this.vm),s())},a=()=>{var u;(u=this.element.contentWindow)==null||u.postMessage({action:"SDK_INIT",id:this.id},"*")};function s(){window.clearInterval(c),window.removeEventListener("message",o)}window.addEventListener("message",o),a();let i=0;const c=window.setInterval(()=>{if(this.vm){s();return}if(i>=f2){s(),r("Timeout: Unable to establish a connection with the StackBlitz VM"),Oo.forEach((u,d)=>{u.id===this.id&&Oo.splice(d,1)});return}i++,a()},d2)}),Oo.push(this)}}const E2=e=>{const t=e instanceof Element?"element":"id";return Oo.find(n=>n[t]===e)??null};function S2(e,t){const n=document.createElement("input");return n.type="hidden",n.name=e,n.value=t,n}function T2(e){return e.replace(/\[/g,"%5B").replace(/\]/g,"%5D")}function Gd({template:e,title:t,description:n,dependencies:r,files:o,settings:a}){if(!ic.includes(e)){const u=ic.map(d=>`'${d}'`).join(", ");console.warn(`Unsupported project.template: must be one of ${u}`)}const s=[],i=(u,d,f="")=>{s.push(S2(u,typeof d=="string"?d:f))};i("project[title]",t),typeof n=="string"&&n.length>0&&i("project[description]",n),i("project[template]",e,"javascript"),r&&(e==="node"?console.warn("Invalid project.dependencies: dependencies must be provided as a 'package.json' file when using the 'node' template."):i("project[dependencies]",JSON.stringify(r))),a&&i("project[settings]",JSON.stringify(a)),Object.entries(o).forEach(([u,d])=>{i(`project[files][${T2(u)}]`,d)});const c=document.createElement("form");return c.method="POST",c.setAttribute("style","display:none!important;"),c.append(...s),c}function L2(e,t){const n=Gd(e);return n.action=mi("/run",t),n.id="sb_run",` + +