Skip to content

Commit dd9f0d4

Browse files
GoulielmosFlorosGoulielmosFloros
authored
fix: Documentation Updates engine-components #459 (#566)
Fixed buttons to export instead of load for: IfcGeometryTiler IfcPropertiesTiler Added Control Panel for: AngleMeasurement AreaMeasurement EdgeMeasurement FaceMeasurement VolumeMeasurement You cannot control the color in all of them. Also for measurement utils there is no need for control panel. Reviewed-by: Goulielmos Floros Refs: #459
1 parent 914b449 commit dd9f0d4

File tree

19 files changed

+429
-17
lines changed

19 files changed

+429
-17
lines changed

‎examples/AngleMeasurement/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
<script type="module" crossorigin src="../assets/angleMeasurement.js"></script>
6161
<link rel="modulepreload" crossorigin href="../assets/web-ifc-api-r1ed24cU.js">
6262
<link rel="modulepreload" crossorigin href="../assets/index-4oEgnBmA.js">
63+
<link rel="modulepreload" crossorigin href="../assets/index-ByMLC5eT.js">
6364
<link rel="modulepreload" crossorigin href="../assets/index-CDKMALq_.js">
6465
<link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
6566
<link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">

‎examples/AreaMeasurement/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
<link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
6363
<link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
6464
<link rel="modulepreload" crossorigin href="../assets/index-4oEgnBmA.js">
65+
<link rel="modulepreload" crossorigin href="../assets/index-ByMLC5eT.js">
6566
<link rel="modulepreload" crossorigin href="../assets/index-CDKMALq_.js">
6667
</head>
6768

‎examples/EdgeMeasurement/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
<link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
6363
<link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
6464
<link rel="modulepreload" crossorigin href="../assets/index-4oEgnBmA.js">
65+
<link rel="modulepreload" crossorigin href="../assets/index-ByMLC5eT.js">
6566
<link rel="modulepreload" crossorigin href="../assets/index-CDKMALq_.js">
6667
</head>
6768

‎examples/FaceMeasurement/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
<link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
6363
<link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
6464
<link rel="modulepreload" crossorigin href="../assets/index-4oEgnBmA.js">
65+
<link rel="modulepreload" crossorigin href="../assets/index-ByMLC5eT.js">
6566
<link rel="modulepreload" crossorigin href="../assets/index-CDKMALq_.js">
6667
</head>
6768

‎examples/VolumeMeasurement/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
<link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
6363
<link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
6464
<link rel="modulepreload" crossorigin href="../assets/index-4oEgnBmA.js">
65+
<link rel="modulepreload" crossorigin href="../assets/index-ByMLC5eT.js">
6566
<link rel="modulepreload" crossorigin href="../assets/index-CDKMALq_.js">
6667
</head>
6768

‎examples/assets/angleMeasurement.js

+23-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,23 @@
1-
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());
1+
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`
2+
<bim-panel active label="Angle Measurement Tutorial" class="options-menu">
3+
<bim-panel-section collapsed label="Controls">
4+
<bim-label>Create angle: Double click</bim-label>
5+
<bim-label>Delete angle: Delete</bim-label>
6+
</bim-panel-section>
7+
8+
<bim-panel-section collapsed label="Others">
9+
<bim-checkbox checked label="angles enabled"
10+
@change="${({target:a})=>{t.enabled=a.value}}">
11+
</bim-checkbox>
12+
13+
<bim-button label="Delete all"
14+
@click="${()=>{t.deleteAll()}}">
15+
</bim-button>
16+
17+
</bim-panel-section>
18+
</bim-panel>
19+
`);document.body.append(s);const x=c.create(()=>i`
20+
<bim-button class="phone-menu-toggler" icon="solar:settings-bold"
21+
@click="${()=>{s.classList.contains("options-menu-visible")?s.classList.remove("options-menu-visible"):s.classList.add("options-menu-visible")}}">
22+
</bim-button>
23+
`);document.body.append(x);

‎examples/assets/areaMeasurement.js

+27-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,27 @@
1-
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());
1+
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`
2+
<bim-panel active label="Area Measurement Tutorial" class="options-menu">
3+
<bim-panel-section collapsed label="Controls">
4+
<bim-label>Create area dimension: Double click</bim-label>
5+
<bim-label>Calculate selected area: Right click</bim-label>
6+
<bim-label>Delete dimension: Delete</bim-label>
7+
</bim-panel-section>
8+
9+
<bim-panel-section collapsed label="Others">
10+
<bim-checkbox checked label="Area dimensions enabled"
11+
@change="${({target:o})=>{n.enabled=o.value}}">
12+
</bim-checkbox>
13+
<bim-checkbox checked label="Area dimensions visible"
14+
@change="${({target:o})=>{n.visible=o.value}}">
15+
</bim-checkbox>
16+
17+
<bim-button label="Delete all"
18+
@click="${()=>{n.deleteAll()}}">
19+
</bim-button>
20+
21+
</bim-panel-section>
22+
</bim-panel>
23+
`);document.body.append(s);const S=c.create(()=>r`
24+
<bim-button class="phone-menu-toggler" icon="solar:settings-bold"
25+
@click="${()=>{s.classList.contains("options-menu-visible")?s.classList.remove("options-menu-visible"):s.classList.add("options-menu-visible")}}">
26+
</bim-button>
27+
`);document.body.append(S);

‎examples/assets/edgeMeasurement.js

+21-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,21 @@
1-
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());
1+
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`
2+
<bim-panel active label="Edge Measurement Tutorial" class="options-menu">
3+
<bim-panel-section collapsed label="Controls">
4+
<bim-label>Create dimension: Double click</bim-label>
5+
<bim-label>Delete dimension: Press O</bim-label>
6+
<bim-label>Delete all dimensions: Press S</bim-label>
7+
<bim-label>Set/Show saved dimensions: Press L</bim-label>
8+
</bim-panel-section>
9+
10+
<bim-panel-section collapsed label="Others">
11+
<bim-checkbox checked label="Dimensions enabled"
12+
@change="${({target:t})=>{n.enabled=t.value}}">
13+
</bim-checkbox>
14+
15+
<bim-button label="Delete all"
16+
@click="${()=>{n.deleteAll()}}">
17+
</bim-button>
18+
19+
</bim-panel-section>
20+
</bim-panel>
21+
`);document.body.append(P);

‎examples/assets/faceMeasurement.js

+25-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,25 @@
1-
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());
1+
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`
2+
<bim-panel active label="Face Measurement Tutorial" class="options-menu">
3+
<bim-panel-section collapsed label="Controls">
4+
<bim-label>Create dimension: Double click</bim-label>
5+
<bim-label>Delete dimension: Press O</bim-label>
6+
<bim-label>Delete all dimensions: Press S</bim-label>
7+
<bim-label>Set/Show saved dimensions: Press L</bim-label>
8+
</bim-panel-section>
9+
10+
<bim-panel-section collapsed label="Others">
11+
<bim-checkbox checked label="Dimensions enabled"
12+
@change="${({target:t})=>{n.enabled=t.value}}">
13+
</bim-checkbox>
14+
15+
<bim-button label="Delete all"
16+
@click="${()=>{n.deleteAll()}}">
17+
</bim-button>
18+
19+
</bim-panel-section>
20+
</bim-panel>
21+
`);document.body.append(a);const x=i.create(()=>c`
22+
<bim-button class="phone-menu-toggler" icon="solar:settings-bold"
23+
@click="${()=>{a.classList.contains("options-menu-visible")?a.classList.remove("options-menu-visible"):a.classList.add("options-menu-visible")}}">
24+
</bim-button>
25+
`);document.body.append(x);

‎examples/assets/ifcGeometryTiler.js

+5-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)