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

static/js/SolveSpaceControls.js

@@ -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();

static/js/models/chamber.js

@@ -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);

static/js/models/k526s-adapter-assy.js

@@ -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);

static/js/models/k526s-adapter.js

@@ -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);

static/js/models/k526s-body.js

@@ -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);

static/js/models/k526s-fixture.js

@@ -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);

static/js/models/k526s-head.js

@@ -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);

static/js/models/kf25.js

@@ -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);

static/js/models/multiport.js

@@ -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);

static/js/models/viewport.js

@@ -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);

templates/page-solvespace.html

@@ -6,98 +6,14 @@
 
 {% block js %}
 
-  <script src="/js/models/kf25.js"></script>
+  <script async src="/js/models/kf25.js"></script>
-  <script src="/js/models/viewport.js"></script>
+  <script async src="/js/models/viewport.js"></script>
-  <script src="/js/models/multiport.js"></script>
+  <script async src="/js/models/multiport.js"></script>
-  <script src="/js/models/chamber.js"></script>
+  <script async src="/js/models/chamber.js"></script>
-  <script src="/js/models/k526s-body.js"></script>
+  <script async src="/js/models/k526s-body.js"></script>
-  <script src="/js/models/k526s-head.js"></script>
+  <script async src="/js/models/k526s-head.js"></script>
-  <script src="/js/models/k526s-fixture.js"></script>
+  <script async src="/js/models/k526s-fixture.js"></script>
-  <script src="/js/models/k526s-adapter.js"></script>
+  <script async src="/js/models/k526s-adapter.js"></script>
-  <script src="/js/models/k526s-adapter-assy.js"></script>
+  <script async 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>
 
 {% endblock %}