Skip to content

Commit

Permalink
feat(playground): detect and update positions of collision areas for …
Browse files Browse the repository at this point in the history
…the bricks
  • Loading branch information
niloysikdar committed Aug 30, 2023
1 parent 5fe5560 commit be31470
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 44 deletions.
142 changes: 109 additions & 33 deletions modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
25 changes: 14 additions & 11 deletions modules/code-builder/playground/pages/WorkSpace/data.ts
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down

0 comments on commit be31470

Please sign in to comment.