Type annotations

CHANGELOG.md

@@ -30,6 +30,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 -   Added style and automatic layout tests for the `draw` function.
 -   Updated documentation, tests, and examples to reflect the `isClass` attribute being optional and set to `false` by default.
 -   Removed unused imports in `demo_C.js`.
+-   Added type interfaces and type annotations to `style.ts`.
 
 ## [0.1.0] - 2024-04-16
 

memory-viz/src/automate.ts

@@ -73,7 +73,7 @@ function drawAutomatedStackFrames(stack_frames, configuration) {
         let width;
         let height;
 
-        if (stack_frame.name !== "BLANK") {
+        if (stack_frame.type !== "BLANK") {
             const size = getSize(stack_frame);
             height = size.height;
             width = size.width;
@@ -87,7 +87,7 @@ function drawAutomatedStackFrames(stack_frames, configuration) {
             required_width = width;
         }
 
-        if (stack_frame.name !== "BLANK") {
+        if (stack_frame.type !== "BLANK") {
             stack_frame.x = configuration.left_margin;
             stack_frame.y = min_required_height;
             draw_stack_frames.push(stack_frame);

memory-viz/src/style.ts

@@ -1,16 +1,17 @@
 import merge from "deepmerge";
 import { config } from "./config";
+import "./types.ts";
 
 // Built-in style for drawing text on canvas (if no style is provided by the user).
-const default_text_style = {
+const default_text_style: AttributeStyle = {
     fill: config.text_color,
     "text-anchor": "middle",
     "font-family": "Consolas, Courier",
     "font-size": config.font_size,
 };
 
 // Default style attributes that apply universally to any type of data.
-const common_style = {
+const common_style: Style = {
     text_id: {
         fill: config.id_color,
         "text-anchor": "middle",
@@ -33,7 +34,7 @@ const common_style = {
     box_type: {},
 };
 
-const category_specific_styles = {
+const category_specific_styles: Record<string, Style> = {
     collection: {
         text_value: { fill: config.id_color },
     },
@@ -48,22 +49,37 @@ const category_specific_styles = {
     },
 };
 
-const immutable = ["int", "str", "tuple", "None", "bool", "float", "date"];
-const collections = ["list", "set", "tuple", "dict"];
+const immutable: Array<string> = [
+    "int",
+    "str",
+    "tuple",
+    "None",
+    "bool",
+    "float",
+    "date",
+];
+const collections: Array<string> = ["list", "set", "tuple", "dict"];
 
-const primitives = ["int", "str", "None", "bool", "float", "date"];
+const primitives: Array<string> = [
+    "int",
+    "str",
+    "None",
+    "bool",
+    "float",
+    "date",
+];
 
 /**
  * Populates a user-passed style object --to the extent needed-- with default data (to adhere to the interface of the
  * style object). Needed to avoid errors of the type "TypeError: Cannot set properties of undefined (setting 'x')", as
  * well as many more.
- * @param {Object} object : the object that represents a Python object the user wants drawn. The style object
+ * @param {DrawnObject} object : the object that represents a Python object the user wants drawn. The style object
  *                          corresponding to 'object' will be extracted be doing object.style.
  * @param {Number} seed : a numeric seed. If valued between 1 and 2^31, RoughJS will generate the exact same shape(s)
  *                          when provided with the same seed. If valued at 0, RoughJS will generate random shape(s).
- * @returns {Object}
+ * @returns {Style}
  */
-function populateStyleObject(object, seed) {
+function populateStyleObject(object: DrawnObject, seed: Number) {
     let style_so_far = common_style;
 
     let object_type;
@@ -90,26 +106,31 @@ 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 = {
+const HIGHLIGHT_TEXT: AttributeStyle = {
+    "font-weight": "bolder",
+    "font-size": "22px",
+};
+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,
     strokeWidth: 4,
     fill: "yellow",
     fillStyle: "solid",
 };
-const FADE_BOX_LINES = { roughness: 2.0, strokeWidth: 0.5 };
-const FADE_BOX = {
+const FADE_BOX_LINES: AttributeStyle = { roughness: 2.0, strokeWidth: 0.5 };
+const FADE_BOX: AttributeStyle = {
     roughness: 2.0,
     strokeWidth: 0.5,
     fill: "rgb(247, 247, 247)",
     fillStyle: "solid",
 };
-const HIDE_BOX = { fill: "white", fillStyle: "solid" };
+const HIDE_BOX: AttributeStyle = { fill: "white", fillStyle: "solid" };
 
-const presets = {
+const presets: Record<string, Style> = {
     highlight: {
         text_value: HIGHLIGHT_TEXT,
         text_id: HIGHLIGHT_TEXT,

memory-viz/src/types.ts

@@ -0,0 +1,25 @@
+interface DrawnObject {
+    isClass: boolean;
+    name?: string;
+    type?: string;
+    x?: number;
+    y?: number;
+    id: number | string;
+    value: any;
+    stack_frame: boolean;
+    show_indexes?: boolean;
+    style?: Style;
+}
+
+interface AttributeStyle {
+    [propName: string]: string | number;
+}
+
+interface Style {
+    text_id?: AttributeStyle;
+    text_type?: AttributeStyle;
+    text_value?: AttributeStyle;
+    box_id?: AttributeStyle;
+    box_type?: AttributeStyle;
+    box_container?: AttributeStyle;
+}