Merge branch 'master' into type-annotations

david-yz-liu · Jun 5, 2024 · e4a3562 · e4a3562
2 parents 8415a58 + 636e261
commit e4a3562
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 51 deletions.
diff --git a/CHANGELOG.md b/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

diff --git a/memory-viz/src/memory_model.ts b/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;

diff --git a/memory-viz/src/style.ts b/memory-viz/src/style.ts
@@ -113,6 +113,7 @@ const HIGHLIGHT_TEXT: AttributeStyle = {
 const FADE_TEXT: AttributeStyle = {
     /*'font-weight': "normal",*/ "fill-opacity": 0.4,
 };
+const HIDE_TEXT: AttributeStyle = { "fill-opacity": 0 };
 const HIGHLIGHT_BOX_LINES: AttributeStyle = { roughness: 0.2, strokeWidth: 4 };
 const HIGHLIGHT_BOX: AttributeStyle = {
     roughness: 0.2,
@@ -163,17 +164,23 @@ const presets: Record<string, Style> = {
         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,
     },
 };