diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9d8bb2b5..03b79848 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,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
index d6e03419..693b4606 100644
--- 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
index 3ff381e8..7162a7ce 100644
--- a/memory-viz/src/style.ts
+++ b/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,
},
};
diff --git a/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap b/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
index 71e6bfb0..f5210978 100644
--- a/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
+++ b/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
@@ -1,71 +1,71 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`draw function formats a mix of stack frame/non-stack frame objects in automatic layout 1`] = `""`;
+exports[`draw function formats a mix of stack frame/non-stack frame objects in automatic layout 1`] = `""`;
-exports[`draw function formats non-stack frame objects in automatic layout 1`] = `""`;
+exports[`draw function formats non-stack frame objects in automatic layout 1`] = `""`;
-exports[`draw function renders 'fade' style preset 1`] = `""`;
+exports[`draw function renders 'fade' style preset 1`] = `""`;
-exports[`draw function renders 'fade_id' style preset 1`] = `""`;
+exports[`draw function renders 'fade_id' style preset 1`] = `""`;
-exports[`draw function renders 'fade_type' style preset 1`] = `""`;
+exports[`draw function renders 'fade_type' style preset 1`] = `""`;
-exports[`draw function renders 'hide' style preset 1`] = `""`;
+exports[`draw function renders 'hide' style preset 1`] = `""`;
-exports[`draw function renders 'hide_container' style preset 1`] = `""`;
+exports[`draw function renders 'hide_container' style preset 1`] = `""`;
-exports[`draw function renders 'hide_id' style preset 1`] = `""`;
+exports[`draw function renders 'hide_id' style preset 1`] = `""`;
-exports[`draw function renders 'highlight' style preset 1`] = `""`;
+exports[`draw function renders 'highlight' style preset 1`] = `""`;
-exports[`draw function renders 'highlight_id' style preset 1`] = `""`;
+exports[`draw function renders 'highlight_id' style preset 1`] = `""`;
-exports[`draw function renders 'highlight_type' style preset 1`] = `""`;
+exports[`draw function renders 'highlight_type' style preset 1`] = `""`;
exports[`draw function renders a blank space 1`] = `""`;
exports[`draw function renders a blank stack frame 1`] = `""`;
-exports[`draw function renders a bool 1`] = `""`;
+exports[`draw function renders a bool 1`] = `""`;
-exports[`draw function renders a bool using manual layout 1`] = `""`;
+exports[`draw function renders a bool using manual layout 1`] = `""`;
-exports[`draw function renders a dict 1`] = `""`;
+exports[`draw function renders a dict 1`] = `""`;
-exports[`draw function renders a float 1`] = `""`;
+exports[`draw function renders a float 1`] = `""`;
-exports[`draw function renders a list with indexes showing 1`] = `""`;
+exports[`draw function renders a list with indexes showing 1`] = `""`;
-exports[`draw function renders a list without indexes showing 1`] = `""`;
+exports[`draw function renders a list without indexes showing 1`] = `""`;
-exports[`draw function renders a set 1`] = `""`;
+exports[`draw function renders a set 1`] = `""`;
-exports[`draw function renders a stack frame and an int 1`] = `""`;
+exports[`draw function renders a stack frame and an int 1`] = `""`;
exports[`draw function renders a stack frame using manual layout 1`] = `""`;
-exports[`draw function renders a str 1`] = `""`;
+exports[`draw function renders a str 1`] = `""`;
-exports[`draw function renders a tuple with indexes showing 1`] = `""`;
+exports[`draw function renders a tuple with indexes showing 1`] = `""`;
-exports[`draw function renders a tuple without indexes showing 1`] = `""`;
+exports[`draw function renders a tuple without indexes showing 1`] = `""`;
-exports[`draw function renders an empty dict 1`] = `""`;
+exports[`draw function renders an empty dict 1`] = `""`;
-exports[`draw function renders an empty list 1`] = `""`;
+exports[`draw function renders an empty list 1`] = `""`;
-exports[`draw function renders an empty set 1`] = `""`;
+exports[`draw function renders an empty set 1`] = `""`;
-exports[`draw function renders an empty tuple 1`] = `""`;
+exports[`draw function renders an empty tuple 1`] = `""`;
-exports[`draw function renders an int 1`] = `""`;
+exports[`draw function renders an int 1`] = `""`;
-exports[`draw function renders an object with no type and no value 1`] = `""`;
+exports[`draw function renders an object with no type and no value 1`] = `""`;
-exports[`draw function renders blank spaces in automatic layout 1`] = `""`;
+exports[`draw function renders blank spaces in automatic layout 1`] = `""`;
-exports[`draw function renders combinations of style presets 1`] = `""`;
+exports[`draw function renders combinations of style presets 1`] = `""`;
-exports[`draw function renders custom style (without presets) 1`] = `""`;
+exports[`draw function renders custom style (without presets) 1`] = `""`;
-exports[`draw function should produce consistent svg when provided seed 1`] = `""`;
+exports[`draw function should produce consistent svg when provided seed 1`] = `""`;