Refactor various components to use list comprehensions for improved readability and performance; add settings.json for tool permissions

MalithaPrabhashana · MalithaPrabhashana · commit 6d4d87c9ca98 · 2026-03-20T09:32:34.000+05:30
diff --git a/components/Canvas.cl.jac b/components/Canvas.cl.jac
@@ -495,9 +495,7 @@ def:pub Canvas(props: dict) -> JsxElement {
                 dup.bendY = original.bendY + dy;
             }
         } elif original.type == "freehand" {
-            dup.points = original.points.map(lambda p: dict -> dict {
-                return {"x": p.x + dx, "y": p.y + dy};
-            });
+            dup.points = [{"x": p.x + dx, "y": p.y + dy} for p in original.points];
         }
         return dup;
     }
@@ -544,9 +542,15 @@ def:pub Canvas(props: dict) -> JsxElement {
         if selectionHook.selectedElement {
             idx = selectionHook.selectedElement.index;
             element = selectionHook.selectedElement.element;
-            newElements = [element].concat(elementsHook.elements.filter(lambda _: any, i: any -> bool {
-                return i != idx;
-            }));
+            otherElements = [];
+            bfi = 0;
+            while bfi < elementsHook.elements.length {
+                if bfi != idx {
+                    otherElements.push(elementsHook.elements[bfi]);
+                }
+                bfi = bfi + 1;
+            }
+            newElements = [element].concat(otherElements);
             elementsHook.setElements(newElements);
             selectionHook.clearSelection();
         }
@@ -1100,12 +1104,10 @@ def:pub Canvas(props: dict) -> JsxElement {
                         scaleY = (bh + deltaY) / bh;
                         if scaleX < 0.1 { scaleX = 0.1; }
                         if scaleY < 0.1 { scaleY = 0.1; }
-                        newElement.points = origEl.points.map(lambda point: dict -> dict {
-                            return {
-                                "x": minX + (point.x - minX) * scaleX,
-                                "y": minY + (point.y - minY) * scaleY
-                            };
-                        });
+                        newElement.points = [
+                            {"x": minX + (point.x - minX) * scaleX, "y": minY + (point.y - minY) * scaleY}
+                            for point in origEl.points
+                        ];
                     }
                 }
             }
@@ -1173,9 +1175,7 @@ def:pub Canvas(props: dict) -> JsxElement {
                             newElement.bendY = originalElement.bendY + multiDy;
                         }
                     } elif originalElement.type == "freehand" {
-                        newElement.points = originalElement.points.map(lambda point: dict -> dict {
-                            return {"x": point.x + multiDx, "y": point.y + multiDy};
-                        });
+                        newElement.points = [{"x": point.x + multiDx, "y": point.y + multiDy} for point in originalElement.points];
                     }
 
                     updates.push({"index": selectedInfo.index, "element": newElement});
@@ -1249,9 +1249,7 @@ def:pub Canvas(props: dict) -> JsxElement {
                 } elif element.type == "freehand" {
                     fhDx = pos.x - selectionHook.dragOffset.x - element.points[0].x;
                     fhDy = pos.y - selectionHook.dragOffset.y - element.points[0].y;
-                    newElement.points = element.points.map(lambda point: dict -> dict {
-                        return {"x": point.x + fhDx, "y": point.y + fhDy};
-                    });
+                    newElement.points = [{"x": point.x + fhDx, "y": point.y + fhDy} for point in element.points];
                 }
 
                 # Move connected lines/arrows along with the shape
diff --git a/components/layout/Sidebar.cl.jac b/components/layout/Sidebar.cl.jac
@@ -198,16 +198,16 @@ def:pub Sidebar(props: dict) -> JsxElement {
         {showColor and <div>
             <span className="sidebar-label">Stroke</span>
             <div className="grid grid-cols-5 gap-1.5 mt-1.5">
-                {presetColors.map(lambda color: any -> any {
-                    isSelected = activeColor == color;
-                    return <button
+                {[
+                    <button
                         key={color}
                         onClick={lambda -> None { handleColorChange(color); }}
                         title={color}
-                        className={"w-7 h-7 rounded-full transition-all duration-150 border border-gray-200/60 " + (isSelected and "ring-2 ring-orange-500 ring-offset-1 scale-110" or "hover:scale-110")}
+                        className={"w-7 h-7 rounded-full transition-all duration-150 border border-gray-200/60 " + (activeColor == color and "ring-2 ring-orange-500 ring-offset-1 scale-110" or "hover:scale-110")}
                         style={{"backgroundColor": color}}
-                    />;
-                })}
+                    />
+                    for color in presetColors
+                ]}
             </div>
             <input
                 type="color"
@@ -256,16 +256,16 @@ def:pub Sidebar(props: dict) -> JsxElement {
         {showShapeTextColor and <div>
             <span className="sidebar-label">Text Color</span>
             <div className="grid grid-cols-5 gap-1.5 mt-1.5">
-                {presetColors.map(lambda stcColor: any -> any {
-                    stcSelected = activeShapeTextColor == stcColor;
-                    return <button
+                {[
+                    <button
                         key={stcColor}
                         onClick={lambda -> None { handleShapeTextColorChange(stcColor); }}
                         title={stcColor}
-                        className={"w-7 h-7 rounded-full transition-all duration-150 border border-gray-200/60 " + (stcSelected and "ring-2 ring-orange-500 ring-offset-1 scale-110" or "hover:scale-110")}
+                        className={"w-7 h-7 rounded-full transition-all duration-150 border border-gray-200/60 " + (activeShapeTextColor == stcColor and "ring-2 ring-orange-500 ring-offset-1 scale-110" or "hover:scale-110")}
                         style={{"backgroundColor": stcColor}}
-                    />;
-                })}
+                    />
+                    for stcColor in presetColors
+                ]}
             </div>
             <input
                 type="color"
@@ -297,25 +297,25 @@ def:pub Sidebar(props: dict) -> JsxElement {
         {showLineStyle and <div>
             <span className="sidebar-label">Line Style</span>
             <div className="flex items-center gap-1 mt-1.5">
-                {lineStyles.map(lambda style: any -> any {
-                    isActive = activeLineStyle == style.id;
-                    return <button
+                {[
+                    <button
                         key={style.id}
                         onClick={lambda -> None { handleLineStyleChange(style.id); }}
                         title={style.label}
-                        className={"flex-1 h-8 rounded-lg flex items-center justify-center transition-all duration-150 " + (isActive and "bg-orange-50 ring-1 ring-orange-200" or "bg-gray-50 hover:bg-gray-100")}
+                        className={"flex-1 h-8 rounded-lg flex items-center justify-center transition-all duration-150 " + (activeLineStyle == style.id and "bg-orange-50 ring-1 ring-orange-200" or "bg-gray-50 hover:bg-gray-100")}
                     >
                         <svg width="32" height="4" viewBox="0 0 32 4">
                             <line
                                 x1="2" y1="2" x2="30" y2="2"
-                                stroke={isActive and "#ea580c" or "#9ca3af"}
+                                stroke={activeLineStyle == style.id and "#ea580c" or "#9ca3af"}
                                 strokeWidth="2"
                                 strokeLinecap="round"
                                 strokeDasharray={style.id == "dashed" and "6,4" or (style.id == "dotted" and "2,4" or "none")}
                             />
                         </svg>
-                    </button>;
-                })}
+                    </button>
+                    for style in lineStyles
+                ]}
             </div>
         </div> or None}
 
@@ -339,34 +339,34 @@ def:pub Sidebar(props: dict) -> JsxElement {
             <div className="h-px bg-gray-100 mb-3"></div>
             <span className="sidebar-label">Font</span>
             <div className="flex flex-col gap-0.5 mt-1.5">
-                {fonts.map(lambda font: any -> any {
-                    isActive = activeFontFamily == font.id;
-                    return <button
+                {[
+                    <button
                         key={font.id}
                         onClick={lambda -> None { handleFontFamilyChange(font.id); }}
                         title={font.id}
-                        className={"px-2 h-7 rounded-md flex items-center text-xs font-medium transition-all duration-150 whitespace-nowrap " + (isActive and "bg-orange-50 text-orange-700 ring-1 ring-orange-200" or "text-gray-500 hover:bg-gray-50")}
+                        className={"px-2 h-7 rounded-md flex items-center text-xs font-medium transition-all duration-150 whitespace-nowrap " + (activeFontFamily == font.id and "bg-orange-50 text-orange-700 ring-1 ring-orange-200" or "text-gray-500 hover:bg-gray-50")}
                         style={{"fontFamily": font.id}}
                     >
                         {font.label}
-                    </button>;
-                })}
+                    </button>
+                    for font in fonts
+                ]}
             </div>
         </div> or None}
 
         {showFontSize and <div>
             <span className="sidebar-label mt-3">Size</span>
             <div className="grid grid-cols-3 gap-1 mt-1.5">
-                {fontSizes.map(lambda size: any -> any {
-                    isActive = activeFontSize == size;
-                    return <button
+                {[
+                    <button
                         key={size}
                         onClick={lambda -> None { handleFontSizeChange(size); }}
-                        className={"h-7 rounded-md flex items-center justify-center text-xs font-medium transition-all duration-150 " + (isActive and "bg-orange-50 text-orange-700 ring-1 ring-orange-200" or "text-gray-500 hover:bg-gray-50")}
+                        className={"h-7 rounded-md flex items-center justify-center text-xs font-medium transition-all duration-150 " + (activeFontSize == size and "bg-orange-50 text-orange-700 ring-1 ring-orange-200" or "text-gray-500 hover:bg-gray-50")}
                     >
                         {size}
-                    </button>;
-                })}
+                    </button>
+                    for size in fontSizes
+                ]}
             </div>
         </div> or None}
     </div>;
diff --git a/components/layout/TopBar.cl.jac b/components/layout/TopBar.cl.jac
@@ -142,19 +142,18 @@ def:pub TopBar(props: dict) -> JsxElement {
             </div>
 
             <div className="flex items-center gap-0.5 bg-gray-50 rounded-lg px-1 py-0.5">
-                {toolIds.map(lambda toolId: any -> any {
-                    isActive = currentTool == toolId and toolId != "image";
-                    shortcut = toolShortcuts[toolId];
-                    return <button
+                {[
+                    <button
                         key={toolId}
                         onClick={lambda -> None { handleToolClick(toolId); }}
-                        title={toolLabels[toolId] + (shortcut and (" (" + shortcut + ")") or "")}
-                        className={"relative w-9 h-9 rounded-md flex flex-col items-center justify-center gap-0 transition-all duration-150 " + (isActive and "bg-white text-orange-600 shadow-sm" or "text-gray-400 hover:bg-white/60 hover:text-gray-600")}
+                        title={toolLabels[toolId] + (toolShortcuts[toolId] and (" (" + toolShortcuts[toolId] + ")") or "")}
+                        className={"relative w-9 h-9 rounded-md flex flex-col items-center justify-center gap-0 transition-all duration-150 " + (currentTool == toolId and toolId != "image" and "bg-white text-orange-600 shadow-sm" or "text-gray-400 hover:bg-white/60 hover:text-gray-600")}
                     >
-                        <ToolIcon toolId={toolId} size={17} color={isActive and "#ea580c" or "currentColor"} />
-                        {shortcut and <span className={"text-[7px] leading-none font-medium mt-px " + (isActive and "text-orange-400" or "text-gray-300")}>{shortcut}</span> or None}
-                    </button>;
-                })}
+                        <ToolIcon toolId={toolId} size={17} color={currentTool == toolId and toolId != "image" and "#ea580c" or "currentColor"} />
+                        {toolShortcuts[toolId] and <span className={"text-[7px] leading-none font-medium mt-px " + (currentTool == toolId and toolId != "image" and "text-orange-400" or "text-gray-300")}>{toolShortcuts[toolId]}</span> or None}
+                    </button>
+                    for toolId in toolIds
+                ]}
             </div>
 
             <div className="min-w-[120px] flex justify-end">
diff --git a/hooks/useCanvas.cl.jac b/hooks/useCanvas.cl.jac
@@ -86,11 +86,13 @@ def:pub useCanvas() -> dict {
                 drawGroupSelectionBox(ctx, groupEls);
             } else {
                 # Draw individual selection boxes
-                selectedElements.forEach(lambda sel: dict -> None {
-                    if sel.element {
-                        drawSelectionBox(ctx, sel.element);
+                selBoxIdx = 0;
+                while selBoxIdx < selectedElements.length {
+                    if selectedElements[selBoxIdx].element {
+                        drawSelectionBox(ctx, selectedElements[selBoxIdx].element);
                     }
-                });
+                    selBoxIdx = selBoxIdx + 1;
+                }
             }
         }
 
diff --git a/hooks/useElements.cl.jac b/hooks/useElements.cl.jac
@@ -11,21 +11,14 @@ def:pub useElements() -> dict {
     def setElementsInternal(newElements: list) -> None {
         elements = newElements;
         # Strip non-serializable imageObj before saving to localStorage
-        toStore = newElements.map(lambda el: any -> any {
-            if el.type == "image" and el.imageObj {
-                return {
-                    "type": el.type,
-                    "x": el.x,
-                    "y": el.y,
-                    "width": el.width,
-                    "height": el.height,
-                    "src": el.src,
-                    "opacity": el.opacity,
-                    "groupId": el.groupId
-                };
-            }
-            return el;
-        });
+        toStore = [
+            el.type == "image" and el.imageObj and {
+                "type": el.type, "x": el.x, "y": el.y,
+                "width": el.width, "height": el.height,
+                "src": el.src, "opacity": el.opacity, "groupId": el.groupId
+            } or el
+            for el in newElements
+        ];
         localStorage.setItem(STORAGE_KEY, JSON.stringify(toStore));
     }
 
@@ -106,9 +99,14 @@ def:pub useElements() -> dict {
     }
 
     def removeElement(index: int) -> None {
-        newElements = elements.filter(lambda _: any, i: any -> bool {
-            return i != index;
-        });
+        newElements = [];
+        ri = 0;
+        while ri < elements.length {
+            if ri != index {
+                newElements.push(elements[ri]);
+            }
+            ri = ri + 1;
+        }
         setElementsWithHistory(newElements);
     }
 
@@ -119,9 +117,14 @@ def:pub useElements() -> dict {
             indexSet[indices[i]] = True;
             i = i + 1;
         }
-        newElements = elements.filter(lambda _: any, i: any -> bool {
-            return not indexSet[i];
-        });
+        newElements = [];
+        rmi = 0;
+        while rmi < elements.length {
+            if not indexSet[rmi] {
+                newElements.push(elements[rmi]);
+            }
+            rmi = rmi + 1;
+        }
         setElementsWithHistory(newElements);
     }
 
diff --git a/hooks/useSelection.cl.jac b/hooks/useSelection.cl.jac
@@ -105,9 +105,7 @@ def:pub useSelection() -> dict {
     }
 
     def removeFromSelection(index: int) -> None {
-        newList = selectedElements.filter(lambda sel: dict -> bool {
-            return sel.index != index;
-        });
+        newList = [sel for sel in selectedElements if sel.index != index];
         selectedElements = newList;
         if newList.length == 1 {
             selectedElement = newList[0];
diff --git a/services/canvas.cl.jac b/services/canvas.cl.jac
@@ -73,9 +73,11 @@ def:pub drawTextElement(ctx: any, element: dict) -> None {
     ctx.shadowOffsetY = 1;
 
     lines = element.text.split(String.fromCharCode(10));
-    lines.forEach(lambda line: any, index: any -> None {
-        ctx.fillText(line, element.x, element.y + (index * element.fontSize * 1.2));
-    });
+    lineIdx = 0;
+    while lineIdx < lines.length {
+        ctx.fillText(lines[lineIdx], element.x, element.y + (lineIdx * element.fontSize * 1.2));
+        lineIdx = lineIdx + 1;
+    }
     ctx.restore();
 }
 
@@ -553,20 +555,23 @@ def:pub getElementBounds(ctx: any, element: dict) -> dict {
             fMaxX = element.points[0].x;
             fMaxY = element.points[0].y;
 
-            element.points.forEach(lambda point: dict -> None {
-                if point.x < fMinX {
-                    fMinX = point.x;
+            fpi = 0;
+            while fpi < element.points.length {
+                fPoint = element.points[fpi];
+                if fPoint.x < fMinX {
+                    fMinX = fPoint.x;
                 }
-                if point.y < fMinY {
-                    fMinY = point.y;
+                if fPoint.y < fMinY {
+                    fMinY = fPoint.y;
                 }
-                if point.x > fMaxX {
-                    fMaxX = point.x;
+                if fPoint.x > fMaxX {
+                    fMaxX = fPoint.x;
                 }
-                if point.y > fMaxY {
-                    fMaxY = point.y;
+                if fPoint.y > fMaxY {
+                    fMaxY = fPoint.y;
                 }
-            });
+                fpi = fpi + 1;
+            }
 
             return {
                 "x": fMinX - padding,

Original file line number	Diff line number	Diff line change
`@@ -86,11 +86,13 @@ def:pub useCanvas() -> dict {`
`86`	`86`	`drawGroupSelectionBox(ctx, groupEls);`
`87`	`87`	`} else {`
`88`	`88`	`# Draw individual selection boxes`
`89`		`- selectedElements.forEach(lambda sel: dict -> None {`
`90`		`- if sel.element {`
`91`		`- drawSelectionBox(ctx, sel.element);`
	`89`	`+ selBoxIdx = 0;`
	`90`	`+ while selBoxIdx < selectedElements.length {`
	`91`	`+ if selectedElements[selBoxIdx].element {`
	`92`	`+ drawSelectionBox(ctx, selectedElements[selBoxIdx].element);`
`92`	`93`	`}`
`93`		`- });`
	`94`	`+ selBoxIdx = selBoxIdx + 1;`
	`95`	`+ }`
`94`	`96`	`}`
`95`	`97`	`}`
`96`	`98`