Browse Source

fix(issue#3): Loads models separately

- 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
master
sovanna 3 months ago
parent
commit
2a2a7da014
11 changed files with 77 additions and 93 deletions
  1. +32
    -0
      static/js/SolveSpaceControls.js
  2. +4
    -0
      static/js/models/chamber.js
  3. +4
    -0
      static/js/models/k526s-adapter-assy.js
  4. +4
    -0
      static/js/models/k526s-adapter.js
  5. +4
    -0
      static/js/models/k526s-body.js
  6. +4
    -0
      static/js/models/k526s-fixture.js
  7. +4
    -0
      static/js/models/k526s-head.js
  8. +4
    -0
      static/js/models/kf25.js
  9. +4
    -0
      static/js/models/multiport.js
  10. +4
    -0
      static/js/models/viewport.js
  11. +9
    -93
      templates/page-solvespace.html

+ 32
- 0
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
- 0
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
- 0
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
- 0
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
- 0
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
- 0
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
- 0
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
- 0
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
- 0
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
- 0
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);

+ 9
- 93
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 %}

Loading…
Cancel
Save