M-Labs/web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

fix(issue#3): Loads models separately

Browse Source 
- common models functions are loaded in SolveSpaceControls.js
- each js model file is now autonomous
- in page-solvespace.html, add each <script> 'async' attribute

So now, each js model file will be loaded as soon as available,
avoiding blocking rendering page
This commit is contained in:
sovanna 2020-04-21 18:23:49 +09:00
parent eb4f52c022
commit 2a2a7da014
11 changed files with 77 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
static/js/SolveSpaceControls.js
View File

@ -488,3 +488,35 @@ solvespace = function(obj, params) {
return new THREE.LineSegments(geometry, material);
}
};
function findBootstrapEnvironment() {
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
let el = document.createElement('div');
document.body.appendChild(el);
let curEnv = envs.shift();
for (let env of envs.reverse()) {
el.classList.add(`d-${env}-none`);
if (window.getComputedStyle(el).display === 'none') {
curEnv = env;
break;
}
}
document.body.removeChild(el);
return curEnv;
}
function load_treejs_model(model_id, model_solvespace, model_param) {
let node = document.getElementById(model_id);
node.parentNode.replaceChild(
solvespace(model_solvespace, model_param),
node
);
}
var bootstrap_env = findBootstrapEnvironment();

4
static/js/models/chamber.js
View File

@ -158438,3 +158438,7 @@ var solvespace_model_chamber = {
[[-32.452981, -7.763532, -143.238147], [-31.622098, -8.369955, -143.238147]],
]
};
var params_chamber = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 200, scale: 1} : {width: 800, height: 600, scale: 3};
load_treejs_model('chamber', solvespace_model_chamber, params_chamber);

4
static/js/models/k526s-adapter-assy.js
View File

@ -24988,3 +24988,7 @@ var solvespace_model_k526s_adapter_assy = {
[[-11.693151, -6.302981, -7.763532], [-11.693151, -5.894512, -8.078040]],
]
};
var params_k526s_assy = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 8} : {width: 400, height: 300, scale: 8};
load_treejs_model('k526s-adapter-assy', solvespace_model_k526s_adapter_assy, params_k526s_assy);

4
static/js/models/k526s-adapter.js
View File

@ -7112,3 +7112,7 @@ var solvespace_model_k526s_adapter = {
[[1.250000, -8.882840, -4.592946], [1.250000, -8.369955, -5.472098]],
]
};
var params_k526s_adapter = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)} : {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)};
load_treejs_model('k526s-adapter', solvespace_model_k526s_adapter, params_k526s_adapter);

4
static/js/models/k526s-body.js
View File

@ -36982,3 +36982,7 @@ var solvespace_model_k526s_body = {
[[-16.978010, 13.676859, -11.100000], [-18.000000, 14.434672, -11.100000]],
]
};
var params_k526s_body = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)} : {width: 400, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)};
load_treejs_model('k526s-body', solvespace_model_k526s_body, params_k526s_body);

4
static/js/models/k526s-fixture.js
View File

@ -13196,3 +13196,7 @@ var solvespace_model_k526s_fixture = {
[[-4.758563, -2.836342, -3.493589], [-4.758563, -3.493589, -2.836342]],
]
};
var params_k526s_fixture = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 200, scale: 6} : {width: 800, height: 400, scale: 12};
load_treejs_model('k526s-fixture', solvespace_model_k526s_fixture, params_k526s_fixture);

4
static/js/models/k526s-head.js
View File

@ -9340,3 +9340,7 @@ var solvespace_model_k526s_head = {
[[-49.225000, -1.332896, -1.332896], [-49.225000, -1.577737, -1.031490]],
]
};
var params_k526s_head = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)} : {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)};
load_treejs_model('k526s-head', solvespace_model_k526s_head, params_k526s_head);

4
static/js/models/kf25.js
View File

@ -3992,3 +3992,7 @@ var solvespace_model_kf25 = {
[[0.000000, -7.071068, -7.071068], [0.000000, -6.302981, -7.763532]],
]
};
var params_kf25 = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)} : {width: 400, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)};
load_treejs_model('kf25', solvespace_model_kf25, params_kf25);

4
static/js/models/multiport.js
View File

@ -43672,3 +43672,7 @@ var solvespace_model_multiport = {
[[-0.750000, -24.624439, -37.664798], [-0.750000, -20.668257, -39.972780]],
]
};
var params_multiport = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 3} : {width: 400, height: 300, scale: 3};
load_treejs_model('multiport', solvespace_model_multiport, params_multiport);

4
static/js/models/viewport.js
View File

@ -35408,3 +35408,7 @@ var solvespace_model_viewport = {
[[-3.000000, -34.935893, -28.363416], [-3.000000, -31.819805, -31.819805]],
]
};
var params_viewport = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 3} : {width: 400, height: 300, scale: 3};
load_treejs_model('viewport', solvespace_model_viewport, params_viewport);

102
templates/page-solvespace.html
View File

@ -6,98 +6,14 @@
{% block js %}
<script src="/js/models/kf25.js"></script>
<script src="/js/models/viewport.js"></script>
<script src="/js/models/multiport.js"></script>
<script src="/js/models/chamber.js"></script>
<script src="/js/models/k526s-body.js"></script>
<script src="/js/models/k526s-head.js"></script>
<script src="/js/models/k526s-fixture.js"></script>
<script src="/js/models/k526s-adapter.js"></script>
<script src="/js/models/k526s-adapter-assy.js"></script>
<script>
(function () {
function findBootstrapEnvironment() {
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
let el = document.createElement('div');
document.body.appendChild(el);
let curEnv = envs.shift();
for (let env of envs.reverse()) {
el.classList.add(`d-${env}-none`);
if (window.getComputedStyle(el).display === 'none') {
curEnv = env;
break;
}
}
document.body.removeChild(el);
return curEnv;
}
var bootstrap_env = findBootstrapEnvironment();
var params_chamber = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 200, scale: 1} : {width: 800, height: 600, scale: 3};
var params_kf25 = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)} : {width: 400, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)};
var params_viewport = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 3} : {width: 400, height: 300, scale: 3};
var params_multiport = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 3} : {width: 400, height: 300, scale: 3};
var params_k526s_body = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)} : {width: 400, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)};
var params_k526s_head = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)} : {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)};
var params_k526s_fixture = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 200, scale: 6} : {width: 800, height: 400, scale: 12};
var params_k526s_adapter = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)} : {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)};
var params_k526s_assy = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 8} : {width: 400, height: 300, scale: 8};
var nodes = [{
id: 'kf25',
model: solvespace_model_kf25,
params: params_kf25,
}, {
id: 'viewport',
model: solvespace_model_viewport,
params: params_viewport,
}, {
id: 'multiport',
model: solvespace_model_multiport,
params: params_multiport,
}, {
id: 'chamber',
model: solvespace_model_chamber,
params: params_chamber,
}, {
id: 'k526s-body',
model: solvespace_model_k526s_body,
params: params_k526s_body,
}, {
id: 'k526s-head',
model: solvespace_model_k526s_head,
params: params_k526s_head,
}, {
id: 'k526s-fixture',
model: solvespace_model_k526s_fixture,
params: params_k526s_fixture,
}, {
id: 'k526s-adapter',
model: solvespace_model_k526s_adapter,
params: params_k526s_adapter,
}, {
id: 'k526s-adapter-assy',
model: solvespace_model_k526s_adapter_assy,
params: params_k526s_assy,
}];
for (var i = nodes.length - 1; i >= 0; i--) {
let n = nodes[i];
if (n.id) {
let node = document.getElementById(n.id);
node.parentNode.replaceChild(solvespace(n.model, n.params), node);
}
}
})();
</script>
<script async src="/js/models/kf25.js"></script>
<script async src="/js/models/viewport.js"></script>
<script async src="/js/models/multiport.js"></script>
<script async src="/js/models/chamber.js"></script>
<script async src="/js/models/k526s-body.js"></script>
<script async src="/js/models/k526s-head.js"></script>
<script async src="/js/models/k526s-fixture.js"></script>
<script async src="/js/models/k526s-adapter.js"></script>
<script async src="/js/models/k526s-adapter-assy.js"></script>
{% endblock %}