ohzi-core 6.2.3 → 6.3.2

package/src/utilities/MeshSampler.js

@@ -8,38 +8,38 @@ class MeshSampler
 
   sample(buffer_geometry, sample_count)
   {
-    let face_areas = [];
+    const face_areas = [];
 
     let min_area = 99999999;
 
-    let vertices = buffer_geometry.getAttribute('position');
-    let normals = buffer_geometry.getAttribute('normal');
-    let indices  = buffer_geometry.index;
+    const vertices = buffer_geometry.getAttribute('position');
+    const normals = buffer_geometry.getAttribute('normal');
+    const indices  = buffer_geometry.index;
 
-    let faces = [];
+    const faces = [];
 
     for (let i = 0; i < indices.count; i += 3)
     {
-      let index_0 = indices.array[i + 0];
-      let index_1 = indices.array[i + 1];
-      let index_2 = indices.array[i + 2];
+      const index_0 = indices.array[i + 0];
+      const index_1 = indices.array[i + 1];
+      const index_2 = indices.array[i + 2];
 
-      let v1 = new Vector3();
+      const v1 = new Vector3();
       v1.x = vertices.getX(index_0);
       v1.y = vertices.getY(index_0);
       v1.z = vertices.getZ(index_0);
 
-      let v2 = new Vector3();
+      const v2 = new Vector3();
       v2.x = vertices.getX(index_1);
       v2.y = vertices.getY(index_1);
       v2.z = vertices.getZ(index_1);
 
-      let v3 = new Vector3();
+      const v3 = new Vector3();
       v3.x = vertices.getX(index_2);
       v3.y = vertices.getY(index_2);
       v3.z = vertices.getZ(index_2);
 
-      let face = {
+      const face = {
         a: v1,
         b: v2,
         c: v3
@@ -47,48 +47,48 @@ class MeshSampler
 
       if (normals)
       {
-        let n1 = new Vector3();
+        const n1 = new Vector3();
         n1.x = normals.getX(index_0);
         n1.y = normals.getY(index_0);
         n1.z = normals.getZ(index_0);
 
-        let n2 = new Vector3();
+        const n2 = new Vector3();
         n2.x = normals.getX(index_1);
         n2.y = normals.getY(index_1);
         n2.z = normals.getZ(index_1);
 
-        let n3 = new Vector3();
+        const n3 = new Vector3();
         n3.x = normals.getX(index_2);
         n3.y = normals.getY(index_2);
         n3.z = normals.getZ(index_2);
 
-        let normal = n1.clone().add(n2).add(n3).normalize();
+        const normal = n1.clone().add(n2).add(n3).normalize();
         face.normal = normal;
       }
 
       faces.push(face);
 
-      let area = this.get_face_area(face);
+      const area = this.get_face_area(face);
       min_area = Math.min(area, min_area);
       face_areas.push(area);
     }
 
-    let normalized_faces_array = this.get_uniform_face_distribution(face_areas, min_area, faces);
-    let selected_faces = this.select_random_faces(normalized_faces_array, sample_count);
-    let sampled_data = this.sample_data_from_faces(selected_faces);
+    const normalized_faces_array = this.get_uniform_face_distribution(face_areas, min_area, faces);
+    const selected_faces = this.select_random_faces(normalized_faces_array, sample_count);
+    const sampled_data = this.sample_data_from_faces(selected_faces);
     return sampled_data;
   }
 
   sample_data_from_faces(faces)
   {
-    let sampled_points = [];
-    let sampled_normals = [];
+    const sampled_points = [];
+    const sampled_normals = [];
     for (let i = 0; i < faces.length; i++)
     {
-      let face = faces[i];
+      const face = faces[i];
 
-      let w1 = Math.random();
-      let w2 = Math.random();
+      const w1 = Math.random();
+      const w2 = Math.random();
 
       sampled_points.push(this.sample_point_in_face(w1, w2, face.a, face.b, face.c).clone());
       if (face.normal)
@@ -101,11 +101,11 @@ class MeshSampler
 
   select_random_faces(faces, amount)
   {
-    let selected_faces = [];
+    const selected_faces = [];
     for (let i = 0; i < amount; i++)
     {
-      let random = Math.floor(Math.random() * faces.length);
-      let selected_face = faces[random];
+      const random = Math.floor(Math.random() * faces.length);
+      const selected_face = faces[random];
 
       selected_faces.push(selected_face);
     }
@@ -115,11 +115,11 @@ class MeshSampler
 
   get_uniform_face_distribution(face_areas, minimum_area, faces)
   {
-    let extended_triangle_indices = [];
+    const extended_triangle_indices = [];
     for (let i = 0; i < face_areas.length; i++)
     {
       face_areas[i] /= minimum_area;
-      let repetitions_needed = Math.floor(Math.round(face_areas[i]));
+      const repetitions_needed = Math.floor(Math.round(face_areas[i]));
       for (let j = 0; j < repetitions_needed; j++)
       {
         extended_triangle_indices.push(faces[i]);
@@ -130,8 +130,8 @@ class MeshSampler
 
   get_face_area(face)
   {
-    let vec1 = face.b.clone().sub(face.a);
-    let vec2 = face.c.clone().sub(face.a);
+    const vec1 = face.b.clone().sub(face.a);
+    const vec2 = face.c.clone().sub(face.a);
     return vec1.cross(vec2).length() / 2;
   }
 
@@ -143,7 +143,7 @@ class MeshSampler
       w2 = 1.0 - w2;
     }
 
-    let w3 = 1.0 - (w1 + w2);
+    const w3 = 1.0 - (w1 + w2);
 
     return v1.clone().multiplyScalar(w1).add(v2.clone().multiplyScalar(w2)).add(v3.clone().multiplyScalar(w3));
   }

package/src/utilities/ModelUtilities.js

@@ -21,7 +21,7 @@ class ModelUtilities
 
   get_geometries(scene)
   {
-    let geometries = [];
+    const geometries = [];
 
     this.get_mesh(scene, (child) =>
     {
@@ -86,7 +86,7 @@ class ModelUtilities
       }
     });
 
-    for (let name in skinnedMeshes)
+    for (const name in skinnedMeshes)
     {
       const skinnedMesh = skinnedMeshes[name];
       const skeleton = skinnedMesh.skeleton;

package/src/utilities/OMath.js

@@ -49,8 +49,8 @@ export default class OMath
 
   static project_points_on_plane(points, plane)
   {
-    let projected_point = new Vector3();
-    let points_on_plane = [];
+    const projected_point = new Vector3();
+    const points_on_plane = [];
     for (let i = 0; i < points.length; i++)
     {
       plane.projectPoint(points[i], projected_point);
@@ -123,7 +123,7 @@ export default class OMath
 
   static points_average(points)
   {
-    let center = points[0].clone();
+    const center = points[0].clone();
     for (let i = 1; i < points.length; i++)
     {
       center.add(points[i]);
@@ -134,7 +134,7 @@ export default class OMath
 
   static get_random_color()
   {
-    let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
+    const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
 
     let col = '#';
     col += arr[Math.floor(Math.random() * 16)];

package/src/utilities/ObjectUtilities.js

@@ -17,7 +17,7 @@ export default class ObjectUtilities
         obj['@attributes'] = {};
         for (let j = 0; j < xml.attributes.length; j++)
         {
-          let attribute = xml.attributes.item(j);
+          const attribute = xml.attributes.item(j);
           obj['@attributes'][attribute.nodeName] = attribute.nodeValue;
         }
       }
@@ -32,8 +32,8 @@ export default class ObjectUtilities
     {
       for (let i = 0; i < xml.childNodes.length; i++)
       {
-        let item = xml.childNodes.item(i);
-        let nodeName = item.nodeName;
+        const item = xml.childNodes.item(i);
+        const nodeName = item.nodeName;
         if (typeof (obj[nodeName]) === 'undefined')
         {
           obj[nodeName] = this.xml_to_json(item);
@@ -42,7 +42,7 @@ export default class ObjectUtilities
         {
           if (typeof (obj[nodeName].push) === 'undefined')
           {
-            let old = obj[nodeName];
+            const old = obj[nodeName];
             obj[nodeName] = [];
             obj[nodeName].push(old);
           }

package/src/utilities/OrthographicFrustumPointFitter.js

@@ -9,22 +9,22 @@ export default class OrthographicFrustumPointFitter
 
   fit_points(points, camera_quaternion, vertical_fov, aspect)
   {
-    let inverse_camera_quat = camera_quaternion.clone().inverse();
+    const inverse_camera_quat = camera_quaternion.clone().inverse();
 
-    let inverted_points = [];
+    const inverted_points = [];
 
     for (let i = 0; i < points.length; i++)
     {
       inverted_points.push(points[i].clone().applyQuaternion(inverse_camera_quat));
     }
 
-    let box = new Box3().setFromPoints(inverted_points);
-    let size = new Vector3();
+    const box = new Box3().setFromPoints(inverted_points);
+    const size = new Vector3();
     box.getSize(size);
 
-    let distance = this.get_distance_to_fit_rect(size.x / 2, size.y / 2, vertical_fov, aspect);
+    const distance = this.get_distance_to_fit_rect(size.x / 2, size.y / 2, vertical_fov, aspect);
 
-    let center = new Vector3();
+    const center = new Vector3();
     box.getCenter(center);
 
     center.applyQuaternion(camera_quaternion);
@@ -37,11 +37,11 @@ export default class OrthographicFrustumPointFitter
 
   get_distance_to_fit_rect(width, height, vertical_fov, aspect)
   {
-    let v_fov = (vertical_fov / 2) * Math.PI / 180;
-    let h_fov = (2 * Math.atan(Math.tan(v_fov) * aspect)) / 2;
+    const v_fov = (vertical_fov / 2) * Math.PI / 180;
+    const h_fov = (2 * Math.atan(Math.tan(v_fov) * aspect)) / 2;
 
-    let distV = height / Math.tan(v_fov);
-    let distH = width / Math.tan(h_fov);
+    const distV = height / Math.tan(v_fov);
+    const distH = width / Math.tan(h_fov);
     return Math.max(Math.abs(distH), Math.abs(distV));
   }
 }

package/src/utilities/PerspectiveFrustumPointFitter.js

@@ -10,26 +10,26 @@ export default class PerspectiveFrustumPointFitter
   {
     this.sphere.setFromPoints(points);
 
-    let v_fov = TMath.degToRad(vertical_fov / 2);
-    let h_fov = (2 * Math.atan(Math.tan(v_fov) * aspect)) / 2;
+    const v_fov = TMath.degToRad(vertical_fov / 2);
+    const h_fov = (2 * Math.atan(Math.tan(v_fov) * aspect)) / 2;
 
-    let up_plane_normal = this.get_up_plane_normal(camera_quaternion, v_fov);
-    let down_plane_normal = this.get_down_plane_normal(camera_quaternion, v_fov);
-    let left_plane_normal = this.get_left_plane_normal(camera_quaternion, h_fov);
-    let right_plane_normal = this.get_right_plane_normal(camera_quaternion, h_fov);
+    const up_plane_normal = this.get_up_plane_normal(camera_quaternion, v_fov);
+    const down_plane_normal = this.get_down_plane_normal(camera_quaternion, v_fov);
+    const left_plane_normal = this.get_left_plane_normal(camera_quaternion, h_fov);
+    const right_plane_normal = this.get_right_plane_normal(camera_quaternion, h_fov);
 
-    let camera_forward_dir = new Vector3(0, 0, -1).applyQuaternion(camera_quaternion);
+    const camera_forward_dir = new Vector3(0, 0, -1).applyQuaternion(camera_quaternion);
 
-    let sphere_center = this.sphere.center.clone();
+    const sphere_center = this.sphere.center.clone();
 
-    let pull_back_distance = this.get_distance_to_fit_rect(this.sphere.radius * 2, this.sphere.radius * 2, vertical_fov, aspect);
-    let far_pos = sphere_center.clone().add(camera_forward_dir.clone().multiplyScalar(pull_back_distance * -1));
+    const pull_back_distance = this.get_distance_to_fit_rect(this.sphere.radius * 2, this.sphere.radius * 2, vertical_fov, aspect);
+    const far_pos = sphere_center.clone().add(camera_forward_dir.clone().multiplyScalar(pull_back_distance * -1));
 
-    let up_plane    = new Plane().setFromNormalAndCoplanarPoint(up_plane_normal, far_pos);
-    let down_plane  = new Plane().setFromNormalAndCoplanarPoint(down_plane_normal, far_pos);
+    const up_plane    = new Plane().setFromNormalAndCoplanarPoint(up_plane_normal, far_pos);
+    const down_plane  = new Plane().setFromNormalAndCoplanarPoint(down_plane_normal, far_pos);
 
-    let left_plane   = new Plane().setFromNormalAndCoplanarPoint(left_plane_normal, far_pos);
-    let right_plane  = new Plane().setFromNormalAndCoplanarPoint(right_plane_normal, far_pos);
+    const left_plane   = new Plane().setFromNormalAndCoplanarPoint(left_plane_normal, far_pos);
+    const right_plane  = new Plane().setFromNormalAndCoplanarPoint(right_plane_normal, far_pos);
 
     this.apply_center_correction_to_pos(far_pos, points, camera_quaternion, up_plane, down_plane, left_plane, right_plane);
 
@@ -41,16 +41,16 @@ export default class PerspectiveFrustumPointFitter
 
     let closest_distance = Infinity;
 
-    let inverse_dir = camera_forward_dir.clone().multiplyScalar(pull_back_distance * -2);
+    const inverse_dir = camera_forward_dir.clone().multiplyScalar(pull_back_distance * -2);
     for (let i = 0; i < points.length; i++)
     {
-      let line = new Line3(points[i].clone(), points[i].clone().add(inverse_dir));
+      const line = new Line3(points[i].clone(), points[i].clone().add(inverse_dir));
 
-      let up_line_intersection  = new Vector3();
-      let down_line_intersection = new Vector3();
+      const up_line_intersection  = new Vector3();
+      const down_line_intersection = new Vector3();
 
-      let left_line_intersection  = new Vector3();
-      let right_line_intersection = new Vector3();
+      const left_line_intersection  = new Vector3();
+      const right_line_intersection = new Vector3();
 
       up_plane.intersectLine(line,  up_line_intersection);
       down_plane.intersectLine(line, down_line_intersection);
@@ -75,16 +75,16 @@ export default class PerspectiveFrustumPointFitter
         console.log('right intersection not found', i);
       }
 
-      let new_up_distance   = points[i].clone().sub(up_line_intersection).length();
-      let new_down_distance = points[i].clone().sub(down_line_intersection).length();
+      const new_up_distance   = points[i].clone().sub(up_line_intersection).length();
+      const new_down_distance = points[i].clone().sub(down_line_intersection).length();
 
-      let new_left_distance   = points[i].clone().sub(left_line_intersection).length();
-      let new_right_distance  = points[i].clone().sub(right_line_intersection).length();
+      const new_left_distance   = points[i].clone().sub(left_line_intersection).length();
+      const new_right_distance  = points[i].clone().sub(right_line_intersection).length();
 
-      let vertical_min    = Math.min(new_up_distance, new_down_distance);
-      let horizontal_min  = Math.min(new_left_distance, new_right_distance);
+      const vertical_min    = Math.min(new_up_distance, new_down_distance);
+      const horizontal_min  = Math.min(new_left_distance, new_right_distance);
 
-      let min = Math.min(vertical_min, horizontal_min);
+      const min = Math.min(vertical_min, horizontal_min);
 
       if (min < closest_distance)
       {
@@ -92,16 +92,16 @@ export default class PerspectiveFrustumPointFitter
       }
     }
 
-    let forward_correction = camera_forward_dir.clone().multiplyScalar(closest_distance);
-    let closest_position = far_pos.clone().add(forward_correction);
+    const forward_correction = camera_forward_dir.clone().multiplyScalar(closest_distance);
+    const closest_position = far_pos.clone().add(forward_correction);
 
     return closest_position;
   }
 
   apply_center_correction_to_pos(target_pos, points, camera_quaternion, up_plane, down_plane, left_plane, right_plane)
   {
-    let vertical_offset = this.get_vertical_correction(points, down_plane, up_plane, camera_quaternion);
-    let horizontal_offset = this.get_horizontal_correction(points, left_plane, right_plane, camera_quaternion);
+    const vertical_offset = this.get_vertical_correction(points, down_plane, up_plane, camera_quaternion);
+    const horizontal_offset = this.get_horizontal_correction(points, left_plane, right_plane, camera_quaternion);
 
     target_pos.add(vertical_offset);
     target_pos.add(horizontal_offset);
@@ -114,20 +114,20 @@ export default class PerspectiveFrustumPointFitter
     // let closest_up_point = undefined;
     // let closest_down_point = undefined;
 
-    let up_dir = new Vector3(0, 1, 0).applyQuaternion(camera_quaternion);
+    const up_dir = new Vector3(0, 1, 0).applyQuaternion(camera_quaternion);
     for (let i = 0; i < points.length; i++)
     {
-      let down_line   = new Line3(points[i].clone(), points[i].clone().add(up_dir.clone().multiplyScalar(-5000000)));
-      let up_line     = new Line3(points[i].clone(), points[i].clone().add(up_dir.clone().multiplyScalar(5000000)));
+      const down_line   = new Line3(points[i].clone(), points[i].clone().add(up_dir.clone().multiplyScalar(-5000000)));
+      const up_line     = new Line3(points[i].clone(), points[i].clone().add(up_dir.clone().multiplyScalar(5000000)));
 
-      let down_line_intersection  = new Vector3();
-      let up_line_intersection = new Vector3();
+      const down_line_intersection  = new Vector3();
+      const up_line_intersection = new Vector3();
 
       down_plane.intersectLine(down_line,  down_line_intersection);
       up_plane.intersectLine(up_line, up_line_intersection);
 
-      let down_dist   = down_line_intersection.distanceTo(points[i]);
-      let up_dist     = up_line_intersection.distanceTo(points[i]);
+      const down_dist   = down_line_intersection.distanceTo(points[i]);
+      const up_dist     = up_line_intersection.distanceTo(points[i]);
 
       if (up_line_intersection.length() < 0.0001)
       {
@@ -150,7 +150,7 @@ export default class PerspectiveFrustumPointFitter
       }
     }
 
-    let correction = (closest_distance_to_up_plane - closest_distance_to_down_plane) / 2;
+    const correction = (closest_distance_to_up_plane - closest_distance_to_down_plane) / 2;
 
     // console.log("vertical_correction", correction)
     return up_dir.clone().multiplyScalar(-correction);
@@ -163,21 +163,21 @@ export default class PerspectiveFrustumPointFitter
     // let closest_right_point = undefined;
     // let closest_left_point = undefined;
 
-    let right_dir = new Vector3(1, 0, 0).applyQuaternion(camera_quaternion);
+    const right_dir = new Vector3(1, 0, 0).applyQuaternion(camera_quaternion);
 
     for (let i = 0; i < points.length; i++)
     {
-      let left_line  = new Line3(points[i].clone(), points[i].clone().add(right_dir.clone().multiplyScalar(-5000000)));
-      let right_line = new Line3(points[i].clone(), points[i].clone().add(right_dir.clone().multiplyScalar(5000000)));
+      const left_line  = new Line3(points[i].clone(), points[i].clone().add(right_dir.clone().multiplyScalar(-5000000)));
+      const right_line = new Line3(points[i].clone(), points[i].clone().add(right_dir.clone().multiplyScalar(5000000)));
 
-      let left_line_intersection  = new Vector3();
-      let right_line_intersection = new Vector3();
+      const left_line_intersection  = new Vector3();
+      const right_line_intersection = new Vector3();
 
       left_plane.intersectLine(left_line,  left_line_intersection);
       right_plane.intersectLine(right_line, right_line_intersection);
 
-      let left_dist  = left_line_intersection.distanceTo(points[i]);
-      let right_dist = right_line_intersection.distanceTo(points[i]);
+      const left_dist  = left_line_intersection.distanceTo(points[i]);
+      const right_dist = right_line_intersection.distanceTo(points[i]);
 
       if (left_line_intersection.length() < 0.0001)
       {
@@ -200,7 +200,7 @@ export default class PerspectiveFrustumPointFitter
       }
     }
 
-    let correction = (closest_distance_to_right_plane - closest_distance_to_left_plane) / 2;
+    const correction = (closest_distance_to_right_plane - closest_distance_to_left_plane) / 2;
     // console.log("horizontal_correction", correction)
 
     return right_dir.clone().multiplyScalar(-correction);
@@ -208,7 +208,7 @@ export default class PerspectiveFrustumPointFitter
 
   get_up_plane_normal(camera_quaternion, v_fov)
   {
-    let up_plane_normal = new Vector3(0, -1, 0);
+    const up_plane_normal = new Vector3(0, -1, 0);
     up_plane_normal.applyQuaternion(new Quaternion().setFromAxisAngle(new Vector3(1, 0, 0), v_fov));
     up_plane_normal.applyQuaternion(camera_quaternion);
     return up_plane_normal;
@@ -216,7 +216,7 @@ export default class PerspectiveFrustumPointFitter
 
   get_down_plane_normal(camera_quaternion, v_fov)
   {
-    let down_plane_normal = new Vector3(0, 1, 0);
+    const down_plane_normal = new Vector3(0, 1, 0);
     down_plane_normal.applyQuaternion(new Quaternion().setFromAxisAngle(new Vector3(1, 0, 0), -v_fov));
     down_plane_normal.applyQuaternion(camera_quaternion);
     return down_plane_normal;
@@ -224,7 +224,7 @@ export default class PerspectiveFrustumPointFitter
 
   get_left_plane_normal(camera_quaternion, h_fov)
   {
-    let left_plane_normal = new Vector3(1, 0, 0);
+    const left_plane_normal = new Vector3(1, 0, 0);
     left_plane_normal.applyQuaternion(new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), h_fov));
     left_plane_normal.applyQuaternion(camera_quaternion);
     return left_plane_normal;
@@ -232,7 +232,7 @@ export default class PerspectiveFrustumPointFitter
 
   get_right_plane_normal(camera_quaternion, h_fov)
   {
-    let right_plane_normal = new Vector3(-1, 0, 0);
+    const right_plane_normal = new Vector3(-1, 0, 0);
     right_plane_normal.applyQuaternion(new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), -h_fov));
     right_plane_normal.applyQuaternion(camera_quaternion);
     return right_plane_normal;
@@ -240,11 +240,11 @@ export default class PerspectiveFrustumPointFitter
 
   get_distance_to_fit_rect(width, height, vertical_fov, aspect)
   {
-    let v_fov = (vertical_fov / 2) * Math.PI / 180;
-    let h_fov = (2 * Math.atan(Math.tan(v_fov) * aspect)) / 2;
+    const v_fov = (vertical_fov / 2) * Math.PI / 180;
+    const h_fov = (2 * Math.atan(Math.tan(v_fov) * aspect)) / 2;
 
-    let distV = height / Math.tan(v_fov);
-    let distH = width / Math.tan(h_fov);
+    const distV = height / Math.tan(v_fov);
+    const distH = width / Math.tan(h_fov);
     return Math.max(Math.abs(distH), Math.abs(distV));
   }
 }

package/src/view_components/ApplicationView.js

@@ -12,9 +12,9 @@ export default class ApplicationView extends ViewState
     this.container = container;
     this.url = url;
 
-    let transition_data = new DrawIOAnimationSheet().parse(ResourceContainer.get(`${name}_data`));
+    const transition_data = new DrawIOAnimationSheet().parse(ResourceContainer.get(`${name}_data`));
 
-    let transitions = [
+    const transitions = [
       {
         to: name,
         data: transition_data

package/src/view_components/ViewComponent.js

@@ -6,6 +6,7 @@ export default class ViewComponent
   {
     this.name = name;
     this.container = container;
+    this.hidden = true;
 
     ViewComponentManager.register_component(this);
   }
@@ -18,6 +19,8 @@ export default class ViewComponent
   {
     this.container.classList.remove('hidden');
     ViewComponentManager.enable_component(this);
+
+    this.hidden = false;
   }
 
   update()
@@ -28,10 +31,31 @@ export default class ViewComponent
   {
     this.container.classList.add('hidden');
     ViewComponentManager.disable_component(this);
+
+    this.hidden = true;
+  }
+
+  set_opacity(current_state_data)
+  {
+    this.container.style.opacity = current_state_data[`${this.name}_opacity`];
+    this.toggle_hidden();
   }
 
-  set_opacity(opacity)
+  toggle_hidden()
   {
-    this.container.style.opacity = opacity;
+    if (this.container.style.opacity > 0.001)
+    {
+      if (this.hidden)
+      {
+        this.on_enter();
+      }
+    }
+    else
+    {
+      if (!this.hidden)
+      {
+        this.on_exit();
+      }
+    }
   }
 }

package/src/view_components/ViewComponentManager.js

@@ -10,7 +10,9 @@ class ViewComponentManager
 
   update()
   {
-    for (let component of this.enabled_components)
+    this.__set_components_opacities();
+
+    for (const component of this.enabled_components)
     {
       component.update(ViewManager.transition_handler.current_state_data);
     }
@@ -53,6 +55,14 @@ class ViewComponentManager
     console.error('[ViewComponentManager.get] no component found for: ', component_name);
     return undefined;
   }
+
+  __set_components_opacities()
+  {
+    for (let i = 0; i < this.components.length; i++)
+    {
+      this.components[i].set_opacity(ViewManager.transition_handler.current_state_data);
+    }
+  }
 }
 
 export default new ViewComponentManager();

package/src/view_components/ViewManager.js

@@ -9,6 +9,8 @@ class ViewManager
 
     this.transition_table = new TransitionTable();
     this.transition_handler = new ViewStateTransitionHandler(this.transition_table);
+
+    this.view_change_subscribers = [];
   }
 
   update()
@@ -20,13 +22,29 @@ class ViewManager
 
   go_to_view(view_name, change_url = true, skip = false)
   {
-    let v = this.get(view_name);
+    const v = this.get(view_name);
     this.transition_handler.go_to_state(v, skip);
 
     if (change_url)
     {
       this.__change_browser_url(v.url);
     }
+
+    this.notify_view_change(view_name);
+  }
+
+  subscribe_to_view_change(subscriber)
+  {
+    this.view_change_subscribers.push(subscriber);
+  }
+
+  notify_view_change(view_name)
+  {
+    for (let i = 0; i < this.view_change_subscribers.length; i++)
+    {
+      const subscriber = this.view_change_subscribers[i];
+      subscriber.on_view_change(view_name);
+    }
   }
 
   register_view(view)
@@ -58,7 +76,7 @@ class ViewManager
 
   set_view(view_name)
   {
-    let view = this.get(view_name);
+    const view = this.get(view_name);
 
     this.transition_handler.set_state(view);
   }