fix: Documentation Updates engine-components #459

examples/AngleMeasurement/index.html

@@ -60,6 +60,7 @@
   <script type="module" crossorigin src="../assets/angleMeasurement.js"></script>
   <link rel="modulepreload" crossorigin href="../assets/web-ifc-api-r1ed24cU.js">
   <link rel="modulepreload" crossorigin href="../assets/index-4oEgnBmA.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-ByMLC5eT.js">
   <link rel="modulepreload" crossorigin href="../assets/index-CDKMALq_.js">
   <link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
   <link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">

examples/AreaMeasurement/index.html

@@ -62,6 +62,7 @@
   <link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
   <link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
   <link rel="modulepreload" crossorigin href="../assets/index-4oEgnBmA.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-ByMLC5eT.js">
   <link rel="modulepreload" crossorigin href="../assets/index-CDKMALq_.js">
 </head>
 

examples/EdgeMeasurement/index.html

@@ -62,6 +62,7 @@
   <link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
   <link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
   <link rel="modulepreload" crossorigin href="../assets/index-4oEgnBmA.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-ByMLC5eT.js">
   <link rel="modulepreload" crossorigin href="../assets/index-CDKMALq_.js">
 </head>
 

examples/FaceMeasurement/index.html

@@ -62,6 +62,7 @@
   <link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
   <link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
   <link rel="modulepreload" crossorigin href="../assets/index-4oEgnBmA.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-ByMLC5eT.js">
   <link rel="modulepreload" crossorigin href="../assets/index-CDKMALq_.js">
 </head>
 

examples/VolumeMeasurement/index.html

@@ -62,6 +62,7 @@
   <link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
   <link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
   <link rel="modulepreload" crossorigin href="../assets/index-4oEgnBmA.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-ByMLC5eT.js">
   <link rel="modulepreload" crossorigin href="../assets/index-CDKMALq_.js">
 </head>
 

examples/assets/angleMeasurement.js

@@ -1 +1,23 @@
-import{B as d,M as c,a as l}from"./web-ifc-api-r1ed24cU.js";import{C as m,W as i,S as p,a as w,G as u}from"./index-4oEgnBmA.js";import{W as b,w as f}from"./index-CDKMALq_.js";import{S as g}from"./stats.min-GTpOrGrX.js";import"./_commonjsHelpers-Cpj98o6Y.js";const r=document.getElementById("container"),o=new m,y=o.get(i),e=y.create();e.scene=new p(o);e.renderer=new b(o,r);e.camera=new w(o);o.init();e.camera.controls.setLookAt(5,5,5,0,0,0);e.scene.setup();const S=o.get(u);S.create(e);e.scene.three.background=null;const h=new d(3,3,3),k=new c({color:"#6528D7"}),s=new l(h,k);s.position.set(0,1.5,0);e.scene.three.add(s);e.meshes.add(s);const t=o.get(f);t.world=e;t.enabled=!0;r.ondblclick=()=>t.create();window.onkeydown=a=>{(a.code==="Delete"||a.code==="Backspace")&&t.deleteAll()};const n=new g;n.showPanel(2);document.body.append(n.dom);n.dom.style.left="0px";n.dom.style.zIndex="unset";e.renderer.onBeforeUpdate.add(()=>n.begin());e.renderer.onAfterUpdate.add(()=>n.end());
+import{B as d,M as m,a as b}from"./web-ifc-api-r1ed24cU.js";import{C as p,W as u,S as w,a as g,G as h}from"./index-4oEgnBmA.js";import{T as k,L as c,m as i}from"./index-ByMLC5eT.js";import{W as f,w as y}from"./index-CDKMALq_.js";import{S}from"./stats.min-GTpOrGrX.js";import"./_commonjsHelpers-Cpj98o6Y.js";const r=document.getElementById("container"),n=new p,D=n.get(u),e=D.create();e.scene=new w(n);e.renderer=new f(n,r);e.camera=new g(n);n.init();e.camera.controls.setLookAt(5,5,5,0,0,0);e.scene.setup();const L=n.get(h);L.create(e);e.scene.three.background=null;const M=new d(3,3,3),v=new m({color:"#6528D7"}),l=new b(M,v);l.position.set(0,1.5,0);e.scene.three.add(l);e.meshes.add(l);const t=n.get(y);t.world=e;t.enabled=!0;r.ondblclick=()=>t.create();window.onkeydown=a=>{(a.code==="Delete"||a.code==="Backspace")&&t.deleteAll()};const o=new S;o.showPanel(2);document.body.append(o.dom);o.dom.style.left="0px";o.dom.style.zIndex="unset";e.renderer.onBeforeUpdate.add(()=>o.begin());e.renderer.onAfterUpdate.add(()=>o.end());k.init();const s=c.create(()=>i`
+  <bim-panel active label="Angle Measurement Tutorial" class="options-menu">
+      <bim-panel-section collapsed label="Controls">
+          <bim-label>Create angle: Double click</bim-label>  
+          <bim-label>Delete angle: Delete</bim-label>  
+      </bim-panel-section>
+
+      <bim-panel-section collapsed label="Others">
+        <bim-checkbox checked label="angles enabled" 
+          @change="${({target:a})=>{t.enabled=a.value}}">  
+        </bim-checkbox>       
+
+        <bim-button label="Delete all"
+          @click="${()=>{t.deleteAll()}}">
+        </bim-button>
+
+      </bim-panel-section>
+    </bim-panel>
+    `);document.body.append(s);const x=c.create(()=>i`
+      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
+        @click="${()=>{s.classList.contains("options-menu-visible")?s.classList.remove("options-menu-visible"):s.classList.add("options-menu-visible")}}">
+      </bim-button>
+    `);document.body.append(x);

examples/assets/areaMeasurement.js

@@ -1 +1,27 @@
-import{B as d,M as c,a as m}from"./web-ifc-api-r1ed24cU.js";import{S as l}from"./stats.min-GTpOrGrX.js";import{C as i,W as p,S as w,a as u,G as b}from"./index-4oEgnBmA.js";import{W as f,v as g}from"./index-CDKMALq_.js";import"./_commonjsHelpers-Cpj98o6Y.js";const s=document.getElementById("container"),n=new i,y=n.get(p),e=y.create();e.scene=new w(n);e.renderer=new f(n,s);e.camera=new u(n);n.init();e.camera.controls.setLookAt(5,5,5,0,0,0);e.scene.setup();const S=n.get(b);S.create(e);e.scene.three.background=null;const h=new d(3,3,3),k=new c({color:"#6528D7"}),a=new m(h,k);a.position.set(0,1.5,0);e.scene.three.add(a);e.meshes.add(a);const t=n.get(g);t.world=e;t.enabled=!0;s.ondblclick=()=>t.create();s.oncontextmenu=()=>t.endCreation();window.onkeydown=r=>{(r.code==="Delete"||r.code==="Backspace")&&t.deleteAll()};const o=new l;o.showPanel(2);document.body.append(o.dom);o.dom.style.left="0px";o.dom.style.zIndex="unset";e.renderer.onBeforeUpdate.add(()=>o.begin());e.renderer.onAfterUpdate.add(()=>o.end());
+import{B as m,M as d,a as b}from"./web-ifc-api-r1ed24cU.js";import{S as p}from"./stats.min-GTpOrGrX.js";import{C as u,W as h,S as k,a as w,G as g}from"./index-4oEgnBmA.js";import{T as f,L as c,m as r}from"./index-ByMLC5eT.js";import{W as v,v as y}from"./index-CDKMALq_.js";import"./_commonjsHelpers-Cpj98o6Y.js";const l=document.getElementById("container"),t=new u,x=t.get(h),e=x.create();e.scene=new k(t);e.renderer=new v(t,l);e.camera=new w(t);t.init();e.camera.controls.setLookAt(5,5,5,0,0,0);e.scene.setup();const A=t.get(g);A.create(e);e.scene.three.background=null;const C=new m(3,3,3),D=new d({color:"#6528D7"}),i=new b(C,D);i.position.set(0,1.5,0);e.scene.three.add(i);e.meshes.add(i);const n=t.get(y);n.world=e;n.enabled=!0;l.ondblclick=()=>n.create();l.oncontextmenu=()=>n.endCreation();window.onkeydown=o=>{(o.code==="Delete"||o.code==="Backspace")&&n.deleteAll()};const a=new p;a.showPanel(2);document.body.append(a.dom);a.dom.style.left="0px";a.dom.style.zIndex="unset";e.renderer.onBeforeUpdate.add(()=>a.begin());e.renderer.onAfterUpdate.add(()=>a.end());f.init();const s=c.create(()=>r`
+  <bim-panel active label="Area Measurement Tutorial" class="options-menu">
+      <bim-panel-section collapsed label="Controls">
+          <bim-label>Create area dimension: Double click</bim-label>  
+          <bim-label>Calculate selected area: Right click</bim-label>  
+          <bim-label>Delete  dimension: Delete</bim-label>  
+      </bim-panel-section>
+
+      <bim-panel-section collapsed label="Others">
+        <bim-checkbox checked label="Area dimensions enabled" 
+          @change="${({target:o})=>{n.enabled=o.value}}">  
+        </bim-checkbox>       
+        <bim-checkbox checked label="Area dimensions visible" 
+          @change="${({target:o})=>{n.visible=o.value}}">  
+        </bim-checkbox>  
+
+        <bim-button label="Delete all"
+          @click="${()=>{n.deleteAll()}}">
+        </bim-button>
+
+      </bim-panel-section>
+    </bim-panel>
+    `);document.body.append(s);const S=c.create(()=>r`
+      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
+        @click="${()=>{s.classList.contains("options-menu-visible")?s.classList.remove("options-menu-visible"):s.classList.add("options-menu-visible")}}">
+      </bim-button>
+    `);document.body.append(S);

examples/assets/edgeMeasurement.js

@@ -1 +1,21 @@
-import{a as c}from"./web-ifc-api-r1ed24cU.js";import{S as i}from"./stats.min-GTpOrGrX.js";import{C as l,W as m,S as f,a as p,G as w,F as g}from"./index-4oEgnBmA.js";import{W as h,N as u}from"./index-CDKMALq_.js";import"./_commonjsHelpers-Cpj98o6Y.js";const r=document.getElementById("container"),t=new l,y=t.get(m),e=y.create();e.scene=new f(t);e.renderer=new h(t,r);e.camera=new p(t);t.init();e.camera.controls.setLookAt(5,5,5,0,0,0);e.scene.setup();const b=t.get(w);b.create(e);e.scene.three.background=null;const S=new g(t),k=await fetch("https://thatopen.github.io/engine_components/resources/small.frag"),A=await k.arrayBuffer(),W=new Uint8Array(A),d=S.load(W);e.scene.three.add(d);for(const o of d.children)o instanceof c&&e.meshes.add(o);const n=t.get(u);n.world=e;n.enabled=!0;r.ondblclick=()=>n.create();let a;window.addEventListener("keydown",o=>{o.code==="KeyO"?n.delete():o.code==="KeyS"?(a=n.get(),n.deleteAll()):o.code==="KeyL"&&a&&n.set(a)});const s=new i;s.showPanel(2);document.body.append(s.dom);s.dom.style.left="0px";s.dom.style.zIndex="unset";e.renderer.onBeforeUpdate.add(()=>s.begin());e.renderer.onAfterUpdate.add(()=>s.end());
+import{a as r}from"./web-ifc-api-r1ed24cU.js";import{S as c}from"./stats.min-GTpOrGrX.js";import{C as d,W as m,S as b,a as p,G as f,F as u}from"./index-4oEgnBmA.js";import{T as h,L as w,m as g}from"./index-ByMLC5eT.js";import{W as y,N as S}from"./index-CDKMALq_.js";import"./_commonjsHelpers-Cpj98o6Y.js";const l=document.getElementById("container"),a=new d,k=a.get(m),e=k.create();e.scene=new b(a);e.renderer=new y(a,l);e.camera=new p(a);a.init();e.camera.controls.setLookAt(5,5,5,0,0,0);e.scene.setup();const L=a.get(f);L.create(e);e.scene.three.background=null;const A=new u(a),C=await fetch("https://thatopen.github.io/engine_components/resources/small.frag"),D=await C.arrayBuffer(),x=new Uint8Array(D),i=A.load(x);e.scene.three.add(i);for(const t of i.children)t instanceof r&&e.meshes.add(t);const n=a.get(S);n.world=e;n.enabled=!0;l.ondblclick=()=>n.create();let s;window.addEventListener("keydown",t=>{t.code==="KeyO"?n.delete():t.code==="KeyS"?(s=n.get(),n.deleteAll()):t.code==="KeyL"&&s&&n.set(s)});const o=new c;o.showPanel(2);document.body.append(o.dom);o.dom.style.left="0px";o.dom.style.zIndex="unset";e.renderer.onBeforeUpdate.add(()=>o.begin());e.renderer.onAfterUpdate.add(()=>o.end());h.init();const P=w.create(()=>g`
+  <bim-panel active label="Edge Measurement Tutorial" class="options-menu">
+      <bim-panel-section collapsed label="Controls">
+          <bim-label>Create dimension: Double click</bim-label>  
+          <bim-label>Delete dimension: Press O</bim-label> 
+          <bim-label>Delete all dimensions: Press S</bim-label> 
+          <bim-label>Set/Show saved dimensions: Press L</bim-label>   
+      </bim-panel-section>
+
+      <bim-panel-section collapsed label="Others">
+        <bim-checkbox checked label="Dimensions enabled" 
+          @change="${({target:t})=>{n.enabled=t.value}}">  
+        </bim-checkbox>       
+
+        <bim-button label="Delete all"
+          @click="${()=>{n.deleteAll()}}">
+        </bim-button>
+
+      </bim-panel-section>
+    </bim-panel>
+    `);document.body.append(P);

examples/assets/faceMeasurement.js

@@ -1 +1,25 @@
-import{a as c}from"./web-ifc-api-r1ed24cU.js";import{S as i}from"./stats.min-GTpOrGrX.js";import{C as l,W as m,S as f,a as p,G as w,F as g}from"./index-4oEgnBmA.js";import{W as h,P as u}from"./index-CDKMALq_.js";import"./_commonjsHelpers-Cpj98o6Y.js";const r=document.getElementById("container"),t=new l,y=t.get(m),e=y.create();e.scene=new f(t);e.renderer=new h(t,r);e.camera=new p(t);t.init();e.camera.controls.setLookAt(5,5,5,0,0,0);e.scene.setup();const b=t.get(w);b.create(e);e.scene.three.background=null;const S=new g(t),k=await fetch("https://thatopen.github.io/engine_components/resources/small.frag"),A=await k.arrayBuffer(),W=new Uint8Array(A),d=S.load(W);e.scene.three.add(d);for(const o of d.children)o instanceof c&&e.meshes.add(o);const n=t.get(u);n.world=e;n.enabled=!0;r.ondblclick=()=>n.create();let a;window.addEventListener("keydown",o=>{o.code==="KeyO"?n.delete():o.code==="KeyS"?(a=n.get(),n.deleteAll()):o.code==="KeyL"&&a&&n.set(a)});const s=new i;s.showPanel(2);document.body.append(s.dom);s.dom.style.left="0px";s.dom.style.zIndex="unset";e.renderer.onBeforeUpdate.add(()=>s.begin());e.renderer.onAfterUpdate.add(()=>s.end());
+import{a as m}from"./web-ifc-api-r1ed24cU.js";import{S as b}from"./stats.min-GTpOrGrX.js";import{C as p,W as u,S as f,a as g,G as h,F as w}from"./index-4oEgnBmA.js";import{T as y,L as i,m as c}from"./index-ByMLC5eT.js";import{W as k,P as S}from"./index-CDKMALq_.js";import"./_commonjsHelpers-Cpj98o6Y.js";const r=document.getElementById("container"),s=new p,L=s.get(u),e=L.create();e.scene=new f(s);e.renderer=new k(s,r);e.camera=new g(s);s.init();e.camera.controls.setLookAt(5,5,5,0,0,0);e.scene.setup();const v=s.get(h);v.create(e);e.scene.three.background=null;const P=new w(s),A=await fetch("https://thatopen.github.io/engine_components/resources/small.frag"),C=await A.arrayBuffer(),D=new Uint8Array(C),d=P.load(D);e.scene.three.add(d);for(const t of d.children)t instanceof m&&e.meshes.add(t);const n=s.get(S);n.world=e;n.enabled=!0;r.ondblclick=()=>n.create();let l;window.addEventListener("keydown",t=>{t.code==="KeyO"?n.delete():t.code==="KeyS"?(l=n.get(),n.deleteAll()):t.code==="KeyL"&&l&&n.set(l)});const o=new b;o.showPanel(2);document.body.append(o.dom);o.dom.style.left="0px";o.dom.style.zIndex="unset";e.renderer.onBeforeUpdate.add(()=>o.begin());e.renderer.onAfterUpdate.add(()=>o.end());y.init();const a=i.create(()=>c`
+  <bim-panel active label="Face Measurement Tutorial" class="options-menu">
+      <bim-panel-section collapsed label="Controls">
+          <bim-label>Create dimension: Double click</bim-label>  
+          <bim-label>Delete dimension: Press O</bim-label> 
+          <bim-label>Delete all dimensions: Press S</bim-label> 
+          <bim-label>Set/Show saved dimensions: Press L</bim-label> 
+      </bim-panel-section>
+
+      <bim-panel-section collapsed label="Others">
+        <bim-checkbox checked label="Dimensions enabled" 
+          @change="${({target:t})=>{n.enabled=t.value}}"> 
+        </bim-checkbox> 
+
+        <bim-button label="Delete all"
+          @click="${()=>{n.deleteAll()}}">
+        </bim-button>
+
+      </bim-panel-section>
+    </bim-panel>
+    `);document.body.append(a);const x=i.create(()=>c`
+      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
+        @click="${()=>{a.classList.contains("options-menu-visible")?a.classList.remove("options-menu-visible"):a.classList.add("options-menu-visible")}}">
+      </bim-button>
+    `);document.body.append(x);