From be31470cfd11171fc13cadb7140f11d608f4355a Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Wed, 30 Aug 2023 17:40:55 +0530
Subject: [PATCH] feat(playground): detect and update positions of collision
 areas for the bricks

---
 .../pages/WorkSpace/BrickFactory.tsx          | 142 ++++++++++++++----
 .../playground/pages/WorkSpace/data.ts        |  25 +--
 2 files changed, 123 insertions(+), 44 deletions(-)

diff --git a/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx b/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx
index 233ab08d..dcb20494 100644
--- a/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx
+++ b/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx
@@ -29,7 +29,6 @@ const BrickFactory = ({ brickData }: { brickData: Brick }) => {
       setCoords(brickData.id, { x: clampX(newX), y: clampY(newY) });
 
       brickData.childBricks.forEach((childBrick) => {
-        console.log(childBrick);
         const childBrickCoords = getCoords(childBrick)!;
         setCoords(childBrick, {
           x: childBrickCoords.x + e.deltaX,
@@ -69,41 +68,118 @@ const BrickFactory = ({ brickData }: { brickData: Brick }) => {
     },
   });
 
-  switch (brickData.type) {
-    case 'data':
-      return (
-        <BrickData brickData={brickData} moveProps={moveProps} coords={brickCoords} color={color} />
-      );
-    case 'expression':
-      return (
-        <BrickExpression
-          brickData={brickData}
-          moveProps={moveProps}
-          coords={brickCoords}
-          color={color}
+  const VisualIndicators = () => (
+    <>
+      {/* Right args bounding box */}
+      {'bBoxArgs' in brickData.instance && (
+        <>
+          {Object.keys(brickData.instance.bBoxArgs).map((name, i) => {
+            if ('bBoxArgs' in brickData.instance) {
+              const arg = brickData.instance.bBoxArgs[name];
+
+              return (
+                <rect
+                  key={i}
+                  x={brickCoords.x + arg?.coords.x}
+                  y={brickCoords.y + arg?.coords.y}
+                  height={arg?.extent.height}
+                  width={arg?.extent.width}
+                  fill="green"
+                  opacity={0.8}
+                />
+              );
+            }
+          })}
+        </>
+      )}
+
+      {/* Top instruction notch bounding box */}
+      {'bBoxNotchInsTop' in brickData.instance && (
+        <rect
+          x={brickCoords.x + brickData.instance.bBoxNotchInsTop?.coords.x}
+          y={brickCoords.y + brickData.instance.bBoxNotchInsTop?.coords.y}
+          height={brickData.instance.bBoxNotchInsTop?.extent.height}
+          width={brickData.instance.bBoxNotchInsTop?.extent.width}
+          fill="green"
+          opacity={0.9}
         />
-      );
-    case 'statement':
-      return (
-        <BrickStatement
-          brickData={brickData}
-          moveProps={moveProps}
-          coords={brickCoords}
-          color={color}
+      )}
+
+      {/* Bottom instruction notch bounding box */}
+      {'bBoxNotchInsBot' in brickData.instance && (
+        <rect
+          x={brickCoords.x + brickData.instance.bBoxNotchInsBot?.coords.x}
+          y={brickCoords.y + brickData.instance.bBoxNotchInsBot?.coords.y}
+          height={brickData.instance.bBoxNotchInsBot?.extent.height}
+          width={brickData.instance.bBoxNotchInsBot?.extent.width}
+          fill="green"
+          opacity={0.9}
         />
-      );
-    case 'block':
-      return (
-        <BrickBlock
-          brickData={brickData}
-          moveProps={moveProps}
-          coords={brickCoords}
-          color={color}
+      )}
+
+      {/* Top instruction notch inside nesting bounding box */}
+      {'bBoxNotchInsNestTop' in brickData.instance && (
+        <rect
+          x={brickCoords.x + brickData.instance.bBoxNotchInsNestTop?.coords.x}
+          y={brickCoords.y + brickData.instance.bBoxNotchInsNestTop?.coords.y}
+          height={brickData.instance.bBoxNotchInsNestTop?.extent.height}
+          width={brickData.instance.bBoxNotchInsNestTop?.extent.width}
+          fill="green"
+          opacity={0.9}
         />
-      );
-    default:
-      return <></>;
-  }
+      )}
+    </>
+  );
+
+  const getBrick = () => {
+    switch (brickData.type) {
+      case 'data':
+        return (
+          <BrickData
+            brickData={brickData}
+            moveProps={moveProps}
+            coords={brickCoords}
+            color={color}
+          />
+        );
+      case 'expression':
+        return (
+          <BrickExpression
+            brickData={brickData}
+            moveProps={moveProps}
+            coords={brickCoords}
+            color={color}
+          />
+        );
+      case 'statement':
+        return (
+          <BrickStatement
+            brickData={brickData}
+            moveProps={moveProps}
+            coords={brickCoords}
+            color={color}
+          />
+        );
+      case 'block':
+        return (
+          <BrickBlock
+            brickData={brickData}
+            moveProps={moveProps}
+            coords={brickCoords}
+            color={color}
+          />
+        );
+      default:
+        return <></>;
+    }
+  };
+
+  return (
+    <>
+      <VisualIndicators />
+      {/* {getBrick()} */}
+    </>
+  );
 };
 
 export default BrickFactory;
diff --git a/modules/code-builder/playground/pages/WorkSpace/data.ts b/modules/code-builder/playground/pages/WorkSpace/data.ts
index 768712a2..b29701c4 100644
--- a/modules/code-builder/playground/pages/WorkSpace/data.ts
+++ b/modules/code-builder/playground/pages/WorkSpace/data.ts
@@ -1,16 +1,19 @@
-import {
-    ModelBrickBlock,
-    ModelBrickData,
-    ModelBrickExpression,
-    ModelBrickStatement,
-} from '@/brick';
-import type { TBrickType, TBrickCoords, TBrickArgDataType } from '@/@types/brick';
+import { ModelBrickBlock, ModelBrickStatement } from '@/brick';
+import type {
+    TBrickType,
+    TBrickCoords,
+    TBrickArgDataType,
+    IBrickData,
+    IBrickExpression,
+    IBrickStatement,
+    IBrickBlock,
+} from '@/@types/brick';
 
 type InstanceMap = {
-    data: ModelBrickData;
-    expression: ModelBrickExpression;
-    statement: ModelBrickStatement;
-    block: ModelBrickBlock;
+    data: IBrickData;
+    expression: IBrickExpression;
+    statement: IBrickStatement;
+    block: IBrickBlock;
 };
 
 export type Brick = {