update documentation and examples to include type

david-yz-liu · May 31, 2024 · 15a2c6c · 15a2c6c
1 parent d2888bc
commit 15a2c6c
Show file tree

Hide file tree

Showing 21 changed files with 120 additions and 116 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,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`.
+-   Changed the `name` attribute to `type` when drawing objects.
 
 ## [0.1.0] - 2024-04-16
 

diff --git a/README.md b/README.md
@@ -30,13 +30,13 @@ const objects = [
         stack_frame: true,
     },
     {
-        name: "str",
+        type: "str",
         id: 19,
         value: "David is cool!",
         style: ["highlight"],
     },
     {
-        name: "int",
+        type: "int",
         id: 13,
         value: 7,
     },

diff --git a/demo/src/__tests__/SvgDisplay.spec.tsx b/demo/src/__tests__/SvgDisplay.spec.tsx
@@ -36,13 +36,13 @@ describe("SvgDisplay", () => {
                     stack_frame: true,
                 },
                 {
-                    name: "str",
+                    type: "str",
                     id: 19,
                     value: "David is cool!",
                     style: ["highlight"],
                 },
                 {
-                    name: "int",
+                    type: "int",
                     id: 13,
                     value: 7,
                 },

diff --git a/demo/src/sample/automated-layout/data.json b/demo/src/sample/automated-layout/data.json
@@ -14,10 +14,10 @@
         "stack_frame": true
     },
     {
-        "name": "list",
+        "type": "list",
         "id": 84,
         "value": [32, 10, 90, 57],
         "show_indexes": true
     },
-    { "name": "None", "id": 13, "value": "None" }
+    { "type": "None", "id": 13, "value": "None" }
 ]
diff --git a/demo/src/sample/blanks/data.json b/demo/src/sample/blanks/data.json
@@ -7,7 +7,7 @@
         "stack_frame": true
     },
     {
-        "name": "BLANK",
+        "type": "BLANK",
         "width": 100,
         "height": 200,
         "stack_frame": true
@@ -20,43 +20,43 @@
         "stack_frame": true
     },
     {
-        "name": "list",
+        "type": "list",
         "id": 82,
         "value": [19, 43, 28, 49]
     },
     {
-        "name": "list",
+        "type": "list",
         "id": 84,
         "value": [32, 10, 90, 57],
         "show_indexes": true
     },
     {
-        "name": "int",
+        "type": "int",
         "id": 19,
         "value": 1969
     },
     {
-        "name": "BLANK",
+        "type": "BLANK",
         "width": 100,
         "height": 200
     },
     {
-        "name": "bool",
+        "type": "bool",
         "id": 32,
         "value": true
     },
     {
-        "name": "str",
+        "type": "str",
         "id": 43,
         "value": "David is cool"
     },
     {
-        "name": "BLANK",
+        "type": "BLANK",
         "width": 200,
         "height": 150
     },
     {
-        "name": "tuple",
+        "type": "tuple",
         "id": 11,
         "value": [82, 76]
     }

diff --git a/demo/src/sample/manual-layout/data.json b/demo/src/sample/manual-layout/data.json
@@ -11,21 +11,21 @@
     {
         "x": 1050,
         "y": 500,
-        "name": "dict",
+        "type": "dict",
         "id": 10,
         "value": { "x": 81, "y": 100, "z": 121 }
     },
     {
         "x": 1050,
         "y": 40,
-        "name": "tuple",
+        "type": "tuple",
         "id": 11,
         "value": [82, 76]
     },
     {
         "x": 750,
         "y": 250,
-        "name": "bool",
+        "type": "bool",
         "id": 32,
         "value": true
     }

diff --git a/demo/src/sample/simple/data.json b/demo/src/sample/simple/data.json
@@ -7,13 +7,13 @@
         "stack_frame": true
     },
     {
-        "name": "str",
+        "type": "str",
         "id": 19,
         "value": "David is cool!",
         "style": ["highlight"]
     },
     {
-        "name": "int",
+        "type": "int",
         "id": 13,
         "value": 7
     }

diff --git a/demo/src/sample/styling/data.json b/demo/src/sample/styling/data.json
@@ -12,7 +12,7 @@
     {
         "x": 350,
         "y": 350,
-        "name": "list",
+        "type": "list",
         "id": 54,
         "value": [19, 43, 28, 49],
         "style": {
@@ -22,30 +22,30 @@
     {
         "x": 750,
         "y": 500,
-        "name": "str",
+        "type": "str",
         "id": 43,
         "value": "David is cool",
         "style": "highlight"
     },
     {
         "x": 1050,
         "y": 260,
-        "name": "set",
+        "type": "set",
         "id": 90,
         "value": [36, 49, 64]
     },
     {
         "x": 1050,
         "y": 500,
-        "name": "dict",
+        "type": "dict",
         "id": 10,
         "value": { "x": 81, "y": 100, "z": 121 },
         "style": { "text_id": { "font-style": "italic" } }
     },
     {
         "x": 750,
         "y": 750,
-        "name": "None",
+        "type": "None",
         "id": 13,
         "value": "None",
         "style": {

diff --git a/docs/docs/02-object_structure.md b/docs/docs/02-object_structure.md
@@ -12,8 +12,8 @@ must contain the following attributes:
 
 -   `isClass` - `boolean`: denotes whether the object to be drawn is a user-defined class (or a stack frame) or a built-in
     object. This has a default value of `false` and should be manually set to `true` only when drawing a class or stack frame.
--   `name` - `string`: denotes the type of the object to draw (if `isClass===true`, then this is the name of the
-    corresponding class or stack frame).
+-   `name` - `string`: The name of the class or stackframe to be drawn. Note that this attribute is only applicable if the object's 'isClass' attribute is true. Otherwise, this attribute can be excluded from the input.
+-   `type` - `string`: The type of the object to be drawn. If no objects are being drawn, this attribute can be excluded from the input.
 -   If the user wants to hardcode the coordinates (implying the `automation` parameter of `draw` is false), each object
     must include `x` and `y` attributes (for x-y coordinates).
 -   `id` - `string`|`number`: denotes the id value of this object. If we are to draw a stack frame, then this MUST be `null`.
@@ -56,27 +56,27 @@ must contain the following attributes:
     "stack_frame": true
 }
 
-{"name": "BLANK", "width": 100, "height": 200, "stack_frame" : true}
+{"type": "BLANK", "width": 100, "height": 200, "stack_frame" : true}
 
-{"name": "list", "id": 82, "value": [19, 43, 28, 49]}
+{"type": "list", "id": 82, "value": [19, 43, 28, 49]}
 
-{"name": "list", "id": 84, "value": [32, 10, 90, 57], "show_indexes": true}
+{"type": "list", "id": 84, "value": [32, 10, 90, 57], "show_indexes": true}
 
-{"name": "int", "id": 19, "value": 1969}
+{"type": "int", "id": 19, "value": 1969}
 
-{"name": "bool", "id": 32, "value": true}
+{"type": "bool", "id": 32, "value": true}
 
-{"name": "BLANK", "width": 200, "height": 100}
+{"type": "BLANK", "width": 200, "height": 100}
 
-{"name": "str", "id": 43, "value": "David is cool"}
+{"type": "str", "id": 43, "value": "David is cool"}
 
-{"name": "tuple", "id": 11, "value": [82, 76]}
+{"type": "tuple", "id": 11, "value": [82, 76]}
 
-{"name": "set", "id": 90, "value": [36, 49, 64]}
+{"type": "set", "id": 90, "value": [36, 49, 64]}
 
-{"name": "dict", "id": 10, "value": {"x": 81, "y": 100, "z": 121}}
+{"type": "dict", "id": 10, "value": {"x": 81, "y": 100, "z": 121}}
 
-{"name": "None", "id": 13, "value": "None",
+{"type": "None", "id": 13, "value": "None",
     "style": {
       "text_value" : {"font-style": "italic"},
       "box_id": {"fill": "red", "fillStyle": "dots"},

diff --git a/docs/docs/99-api/examples/automation_demo/automation_demo.json b/docs/docs/99-api/examples/automation_demo/automation_demo.json
@@ -14,10 +14,10 @@
         "stack_frame": true
     },
     {
-        "name": "list",
+        "type": "list",
         "id": 84,
         "value": [32, 10, 90, 57],
         "show_indexes": true
     },
-    { "name": "None", "id": 13, "value": "None" }
+    { "type": "None", "id": 13, "value": "None" }
 ]
diff --git a/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_A.js b/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_A.js
@@ -20,8 +20,8 @@ const listOfObjs = [
         value: { age: 12, name: 17 },
         stack_frame: false,
     },
-    { name: "list", id: 82, value: [19, 43, 28, 49] },
-    { name: "int", id: 19, value: 1969 },
+    { type: "list", id: 82, value: [19, 43, 28, 49] },
+    { type: "int", id: 19, value: 1969 },
 ];
 
 const { objs, canvas_height, canvas_width } = drawAutomatedOtherItems(

diff --git a/docs/docs/99-api/examples/blankspaces_demo/blankspaces_demo.js b/docs/docs/99-api/examples/blankspaces_demo/blankspaces_demo.js
@@ -2,7 +2,7 @@
  * This file demonstrates the ability to leave "blanks" when the 'automated.md' option is on.
  *
  * To define a blank box, you specify it as an object in the array (the classic array of objects) with three attributes:
- * - name: This must be equal to "BLANK"
+ * - type: This must be equal to "BLANK"
  * - width: the desired width of the blank box (I say box but in reality there aren't any borders)
  * - height: the desired height of the blank box
  *
@@ -27,27 +27,27 @@ const listOfObjs = [
         value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
         stack_frame: true,
     },
-    { name: "BLANK", width: 100, height: 200, stack_frame: true },
+    { type: "BLANK", width: 100, height: 200, stack_frame: true },
     {
         isClass: true,
         name: "func",
         id: null,
         value: { age: 12, name: 17 },
         stack_frame: true,
     },
-    { name: "list", id: 82, value: [19, 43, 28, 49] },
+    { type: "list", id: 82, value: [19, 43, 28, 49] },
     {
-        name: "list",
+        type: "list",
         id: 84,
         value: [32, 10, 90, 57],
         show_indexes: true,
     },
-    { name: "int", id: 19, value: 1969 },
-    { name: "BLANK", width: 100, height: 200 },
-    { name: "bool", id: 32, value: true },
-    { name: "str", id: 43, value: "David is cool" },
-    { name: "BLANK", width: 200, height: 150 },
-    { name: "tuple", id: 11, value: [82, 76] },
+    { type: "int", id: 19, value: 1969 },
+    { type: "BLANK", width: 100, height: 200 },
+    { type: "bool", id: 32, value: true },
+    { type: "str", id: 43, value: "David is cool" },
+    { type: "BLANK", width: 200, height: 150 },
+    { type: "tuple", id: 11, value: [82, 76] },
 ];
 
 const configuration = {

diff --git a/docs/docs/99-api/examples/manual_demo/manual_demo.json b/docs/docs/99-api/examples/manual_demo/manual_demo.json
@@ -11,21 +11,21 @@
     {
         "x": 1050,
         "y": 500,
-        "name": "dict",
+        "type": "dict",
         "id": 10,
         "value": { "x": 81, "y": 100, "z": 121 }
     },
     {
         "x": 1050,
         "y": 40,
-        "name": "tuple",
+        "type": "tuple",
         "id": 11,
         "value": [82, 76]
     },
     {
         "x": 750,
         "y": 250,
-        "name": "bool",
+        "type": "bool",
         "id": 32,
         "value": true
     }

diff --git a/docs/docs/99-api/examples/simple_demo/simple_demo.js b/docs/docs/99-api/examples/simple_demo/simple_demo.js
@@ -16,12 +16,12 @@ const objects = [
         stack_frame: true,
     },
     {
-        name: "str",
+        type: "str",
         id: 19,
         value: "David is cool!",
         style: ["highlight"],
     },
-    { name: "int", id: 13, value: 7 },
+    { type: "int", id: 13, value: 7 },
 ];
 
 const m = draw(objects, true, { width: 1300 });

diff --git a/docs/docs/99-api/examples/style_demo/nostyle_demo.js b/docs/docs/99-api/examples/style_demo/nostyle_demo.js
@@ -32,32 +32,32 @@ const objs = [
     {
         x: 350,
         y: 350,
-        name: "list",
+        type: "list",
         id: 54,
         value: [19, 43, 28, 49],
     },
     {
         x: 750,
         y: 500,
-        name: "str",
+        type: "str",
         id: 43,
         value: "David is cool",
     },
     {
         x: 1050,
         y: 260,
-        name: "set",
+        type: "set",
         id: 90,
         value: [36, 49, 64],
     },
     {
         x: 1050,
         y: 500,
-        name: "dict",
+        type: "dict",
         id: 10,
         value: { x: 81, y: 100, z: 121 },
     },
-    { x: 750, y: 750, name: "None", id: 13, value: "None" },
+    { x: 750, y: 750, type: "None", id: 13, value: "None" },
 ];
 
 const m = draw(objs, true, configuration);