Highlight box bug

CHANGELOG.md

@@ -15,6 +15,8 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### 🐛 Bug fixes
 
+-   Fixed a bug where box fill colours would cover box text, and changed the implementation of `hide` style option.
+
 ### 📚 Documentation and demo website changes
 
 ### 🔧 Internal changes

memory-viz/src/memory_model.ts

@@ -262,6 +262,15 @@ export class MemoryModel {
             this.getTextLength(type) + 10
         );
 
+        this.drawRect(x, y, id_box, this.prop_min_height, style.box_id);
+        this.drawRect(
+            x + width - type_box,
+            y,
+            type_box,
+            this.prop_min_height,
+            style.box_type
+        );
+
         this.drawText(
             id === null ? "" : `id${id}`,
             x + id_box / 2,
@@ -275,15 +284,6 @@ export class MemoryModel {
             y + this.font_size * 1.5,
             style.text_type
         );
-
-        this.drawRect(x, y, id_box, this.prop_min_height, style.box_id);
-        this.drawRect(
-            x + width - type_box,
-            y,
-            type_box,
-            this.prop_min_height,
-            style.box_type
-        );
     }
 
     /**
@@ -539,6 +539,9 @@ export class MemoryModel {
             box_height += 1.5 * this.item_min_height;
         }
 
+        this.drawRect(x, y, box_width, box_height, style.box_container);
+        const SIZE = { x, y, width: box_width, height: box_height };
+
         // A second loop, so that we can position the colon and value boxes correctly.
         curr_y = y + this.prop_min_height + this.item_min_height / 2;
         for (const k in obj) {
@@ -549,13 +552,6 @@ export class MemoryModel {
                 this.getTextLength(idv + 5)
             );
 
-            this.drawText(
-                ":",
-                x + box_width / 2,
-                curr_y + this.item_min_height / 2 + this.font_size / 4,
-                { fill: this.text_color }
-            );
-
             // Draw the rectangle for values.
             this.drawRect(
                 x + box_width / 2 + this.font_size,
@@ -564,6 +560,13 @@ export class MemoryModel {
                 this.item_min_height
             );
 
+            this.drawText(
+                ":",
+                x + box_width / 2,
+                curr_y + this.item_min_height / 2 + this.font_size / 4,
+                { fill: this.text_color }
+            );
+
             this.drawText(
                 idv,
                 x + box_width / 2 + this.font_size + value_box / 2,
@@ -574,9 +577,6 @@ export class MemoryModel {
             curr_y += this.item_min_height * 1.5;
         }
 
-        this.drawRect(x, y, box_width, box_height, style.box_container);
-        const SIZE = { x, y, width: box_width, height: box_height };
-
         this.drawProperties(id, "dict", x, y, box_width, style);
 
         return SIZE;

memory-viz/src/style.ts

@@ -92,6 +92,7 @@ function populateStyleObject(object, seed) {
 // Constants employed to establish presets for styles.
 const HIGHLIGHT_TEXT = { "font-weight": "bolder", "font-size": "22px" };
 const FADE_TEXT = { /*'font-weight': "normal",*/ "fill-opacity": 0.4 };
+const HIDE_TEXT = { "fill-opacity": 0 };
 const HIGHLIGHT_BOX_LINES = { roughness: 0.2, strokeWidth: 4 };
 const HIGHLIGHT_BOX = {
     roughness: 0.2,
@@ -142,17 +143,23 @@ const presets = {
         box_type: FADE_BOX_LINES,
     },
     hide: {
+        text_value: HIDE_TEXT,
+        text_id: HIDE_TEXT,
+        text_type: HIDE_TEXT,
         box_container: HIDE_BOX,
         box_id: HIDE_BOX,
         box_type: HIDE_BOX,
     },
     hide_id: {
+        text_id: HIDE_TEXT,
         box_id: HIDE_BOX,
     },
     hide_type: {
+        text_type: HIDE_TEXT,
         box_type: HIDE_BOX,
     },
     hide_container: {
+        text_value: HIDE_TEXT,
         box_container: HIDE_BOX,
     },
 };