Add primitive type support for array elements with editable fields and update array header to show type format

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>

Author: Copilot

src/ArrayCreationDialog.tsx

@@ -47,6 +47,7 @@ export const ArrayCreationDialog = ({
           minWidth: "400px",
           maxWidth: "90vw",
           border: "1px solid #e5e7eb",
+          margin: "20px",
         }}
         onClick={(e) => e.stopPropagation()}
       >

src/MemoryView.tsx

@@ -218,9 +218,17 @@ export const MemoryView = () => {
                 },
               };
               for (let i = 0; i < length; i++) {
+                let value = undefined;
+                if (elementType === "boolean") {
+                  value = false;
+                } else if (numericDataTypes.includes(elementType)) {
+                  value = 0;
+                } else if (elementType === "String") {
+                  value = "";
+                }
                 tempAttributes[`[${i}]`] = {
                   dataType: elementType,
-                  value: undefined,
+                  value: value,
                 };
               }
 
@@ -232,6 +240,7 @@ export const MemoryView = () => {
                   klass: klassName,
                   attributes: tempAttributes,
                   position,
+                  arrayElementType: elementType,
                 },
               };
               const newEdge: CustomEdgeType = {
@@ -420,9 +429,17 @@ export const MemoryView = () => {
             },
           };
           for (let i = 0; i < length; i++) {
+            let value = undefined;
+            if (elementType === "boolean") {
+              value = false;
+            } else if (numericDataTypes.includes(elementType)) {
+              value = 0;
+            } else if (elementType === "String") {
+              value = "";
+            }
             objAttributes[`[${i}]`] = {
               dataType: elementType,
-              value: undefined,
+              value: value,
             };
           }
 
@@ -434,6 +451,7 @@ export const MemoryView = () => {
               klass: type,
               attributes: objAttributes,
               position,
+              arrayElementType: elementType,
             },
           };
 

src/ObjectNode.tsx

@@ -123,6 +123,12 @@ function ObjectNode({ id, data }: NodeProps<ObjectNodeType>) {
     !isConnectedToMethodCall(id, nodes, edges);
 
   const attributeEdges = edges.filter((e) => e.source == id);
+  
+  // For arrays, display the element type in the header
+  const displayName = data.klass === "Array" && data.arrayElementType
+    ? `:${data.arrayElementType}[]`
+    : `:${data.klass}`;
+  
   return (
     <>
       <div className={`object-node__header ${gc ? "gc" : ""}`}>
@@ -132,14 +138,14 @@ function ObjectNode({ id, data }: NodeProps<ObjectNodeType>) {
           isConnectableStart={false}
           position={Position.Left}
         />
-        <div className="object-node__name">:{data.klass}</div>
+        <div className="object-node__name">{displayName}</div>
         <div className="spacer-10"></div>
       </div>
       <div className={`object-node__body ${gc ? "gc" : ""}`}>
         {Object.entries(data.attributes).map(([name, value]) => (
           <AttributeHandle
             key={`${id}+${name}`}
-            isFinal={data.klass === "Array"}
+            isFinal={false}
             isConnected={
               attributeEdges.find((e) => e.sourceHandle == name)?.target != null
             }

src/memory.ts

@@ -43,6 +43,7 @@ export type Obj = {
     x: number;
     y: number;
   };
+  arrayElementType?: DataType; // For arrays, stores the type of elements
 };
 
 export type Variable = {