Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(masonry) : Complete Bricks and render dummy stack in playground #412

Open
wants to merge 38 commits into
base: gsoc-2024/week-9-10
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
aa5ce47
chore(masonry): modify package.json
Karan-Palan Aug 25, 2024
43a177c
feat(masonry): add coords in brick components
Karan-Palan Aug 25, 2024
497b434
build(masonry/playground): setup playground
Karan-Palan Aug 25, 2024
3698be5
feat(masonry/playground): render a dummy brick stack
Karan-Palan Aug 25, 2024
d5122c8
fix(masonry): Add nestLengthY in the constructor
Karan-Palan Aug 25, 2024
9b58c14
docs(masonry): fix lint errors
Karan-Palan Aug 27, 2024
80c3a94
style(masonry): add seperation line in BrickData.tsx
Karan-Palan Aug 27, 2024
6a4a44f
feat(masonry/playground): Create Brick components with movement props
Karan-Palan Sep 2, 2024
c4b54fe
feat(masonry/playground): Add dummy stack data
Karan-Palan Sep 2, 2024
d4d6a5c
feat(masonry/playground): Add Zustand State initialization
Karan-Palan Sep 2, 2024
e222259
feat(masonry): Enable drag and drop for bricks and stack
Karan-Palan Sep 2, 2024
2ee22f9
feat(masonry): Create functionality to attach bricks below the top brick
Karan-Palan Sep 2, 2024
22e94e9
fix(masonry): Fix import in BrickBlock
Karan-Palan Sep 2, 2024
4ca73f9
feat(masonry): Add id property in the final classes and use uuid to g…
Karan-Palan Sep 2, 2024
67bb2e6
feat(masonry): Create brick factory
Karan-Palan Sep 2, 2024
1a72c64
feat(masonry): Add tests for brick factory
Karan-Palan Sep 2, 2024
4fba69d
feat(masonry): Create Brick Warehouse module with functions to add, r…
Karan-Palan Sep 2, 2024
dc63072
feat(masonry): Add missing methods to BrickBlock.ts
Karan-Palan Sep 3, 2024
554b7a0
feat(masonry): Add currentState function for react props in BrickBloc…
Karan-Palan Sep 3, 2024
bf62505
feat(masonry): Update Abstract classes with remaining properties
Karan-Palan Sep 3, 2024
ee77d01
build: update dependencies
Karan-Palan Sep 3, 2024
c12fc15
feat(masonry): Update abstract classes to support connection points
Karan-Palan Sep 3, 2024
efa2b88
fix(masonry): rename collapsed property to folded
Karan-Palan Sep 4, 2024
a385c3a
feat(masonry): Implement all the abstract classes and Final classes f…
Karan-Palan Sep 4, 2024
f52f067
feat(masonry): Implement final classes for BrickExpression and BrickS…
Karan-Palan Sep 4, 2024
e7d681d
feat(masonry): Update brickFactory and its tests according to the upd…
Karan-Palan Sep 4, 2024
b559510
docs(masonry): rename specification folders
meganindya Sep 5, 2024
33e63ec
config(dev): [vscode] update config
meganindya Sep 5, 2024
bca5df1
config(dev): [markdownlint] update old properties
meganindya Sep 5, 2024
81bf7d8
feat(masonry): [brick] update models
meganindya Sep 5, 2024
94e1e28
feat(masonry): [design0/block] update concrete model
meganindya Sep 5, 2024
1aba7b6
Merge pull request #416 from sugarlabs/gsoc-2024/week-11-12-annex
Karan-Palan Sep 5, 2024
ab58664
fix(masonry): Fix issues in the concrete classes and add exports to t…
Karan-Palan Sep 6, 2024
bd52b37
feat(masonry): Update factory and create components
Karan-Palan Sep 6, 2024
f2d9c12
fix(masonry): remove any type in BrickWrapper
Karan-Palan Sep 6, 2024
dfd5501
fix(masonry): Fix errors in Wrapper component and update individual c…
Karan-Palan Sep 7, 2024
54a2598
feat(masonry): [block] modify React component and Storybook stories
meganindya Sep 7, 2024
55c9e86
docs(masonry): Add technical specs for brick and stack
Karan-Palan Sep 8, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(masonry): [design0/block] update concrete model
  • Loading branch information
meganindya committed Sep 5, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 94e1e28e265f493fecfbd62504013f0ace452af1
340 changes: 181 additions & 159 deletions modules/masonry/src/brick/design0/BrickBlock.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { TBrickArgDataType, TBrickColor, TBrickCoords, TBrickExtent } from '@/@types/brick';
import type { TBrickRenderPropsBlock, TColor, TCoords, TExtent } from '@/@types/brick';
import { BrickModelBlock } from '../model';
import { generatePath } from '../utils/path';

@@ -11,205 +11,227 @@ import { generatePath } from '../utils/path';
export default class BrickBlock extends BrickModelBlock {
readonly _pathResults: ReturnType<typeof generatePath>;

private _boundingBoxArgs: Record<string, TExtent> = {};
private _boundingBoxNest: TExtent = { width: 0, height: 0 };

constructor(params: {
uuid: string;
name: string;

label: string;
glyph: string;
args: Record<
string,
{
label: string;
dataType: TBrickArgDataType;
meta: {
argId: string;
argLabel: string;
argTypeIncoming: string;
};
}
>;
colorBg: TBrickColor;
colorFg: TBrickColor;
colorBgHighlight: TBrickColor;
colorFgHighlight: TBrickColor;
outline: TBrickColor;
scale: number;
glyph?: string;
colorBg: TColor;
colorFg: TColor;
colorBgHighlight: TColor;
colorFgHighlight: TColor;
outline: TColor;
connectAbove: boolean;
connectBelow: boolean;
nestLengthY: number;
folded?: boolean; // Made folded optional

args: {
/** unique identifier of the argument */
id: string;
/** label for the argument */
label: string;
}[];
}) {
super(params);
const argsKeys = Object.keys(this._args);

this._pathResults = generatePath({
hasNest: true,
hasNotchArg: false,
hasNotchInsTop: this._connectAbove,
hasNotchInsBot: this._connectBelow,
scale: this._scale,
nestLengthY: params.nestLengthY,
nestLengthY: 0, // generate from length of label/s
innerLengthX: 100,
argHeights: Array.from({ length: argsKeys.length }, () => 17),
argHeights: Array.from({ length: this._args.length }, () => 17),
});

// Set folded to its initial state or default to false
this._folded = params.folded ?? false;
}

// Getter for SVG path
public get SVGpath(): string {
return this._pathResults.path;
/** @todo implement correctly */
public get boundingBox(): TExtent {
return {
width: this._pathResults.bBoxBrick.extent.width * this._scale,
height: this._pathResults.bBoxBrick.extent.height * this._scale,
};
}

// Getter for bounding box of the brick
public get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords } {
/** @todo implement correctly */
public get connPointsFixed(): Record<
'insTop' | 'insBottom' | 'insNest',
{ extent: TExtent; coords: TCoords }
> {
return {
extent: {
width: this._pathResults.bBoxBrick.extent.width * this._scale,
height: this._pathResults.bBoxBrick.extent.height * this._scale,
insTop: {
extent: { width: 0, height: 0 },
coords: { x: 0, y: 0 },
},
insBottom: {
extent: { width: 0, height: 0 },
coords: { x: 0, y: 0 },
},
coords: {
x: this._pathResults.bBoxBrick.coords.x * this._scale,
y: this._pathResults.bBoxBrick.coords.y * this._scale,
insNest: {
extent: { width: 0, height: 0 },
coords: { x: 0, y: 0 },
},
};
}

// Getter for bounding boxes of the arguments
public get bBoxArgs(): Record<string, { extent: TBrickExtent; coords: TBrickCoords }> {
const argsKeys = Object.keys(this._args);
const result: Record<string, { extent: TBrickExtent; coords: TBrickCoords }> = {};

argsKeys.forEach((key, index) => {
result[key] = {
extent: {
width: this._pathResults.bBoxArgs.extent.width * this._scale,
height: this._pathResults.bBoxArgs.extent.height * this._scale,
},
coords: {
x: this._pathResults.bBoxArgs.coords[index].x * this._scale,
y: this._pathResults.bBoxArgs.coords[index].y * this._scale,
},
/** @todo implement correctly */
get connPointsArg(): { [id: string]: { extent: TExtent; coords: TCoords } } {
const results: { [id: string]: { extent: TExtent; coords: TCoords } } = {};

this._args.forEach(({ id }) => {
results[id] = {
extent: { width: 0, height: 0 },
coords: { x: 0, y: 0 },
};
});

return result;
return results;
}

// Getter for bounding box of the argument notch
public get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords } {
/** @todo implement correctly */
public get renderProps(): TBrickRenderPropsBlock {
return {
extent: {
width: this._pathResults.bBoxNotchArg!.extent.width * this._scale,
height: this._pathResults.bBoxNotchArg!.extent.height * this._scale,
},
coords: {
x: this._pathResults.bBoxNotchArg!.coords.x * this._scale,
y: this._pathResults.bBoxNotchArg!.coords.y * this._scale,
},
};
}

// Getter for bounding box of the top insertion notch
public get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords } {
return {
extent: {
width: this._pathResults.bBoxNotchInsTop!.extent.width * this._scale,
height: this._pathResults.bBoxNotchInsTop!.extent.height * this._scale,
},
coords: {
x: this._pathResults.bBoxNotchInsTop!.coords.x * this._scale,
y: this._pathResults.bBoxNotchInsTop!.coords.y * this._scale,
},
};
}
path: this._pathResults.path,

// Getter for bounding box of the bottom insertion notch
public get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords } {
return {
extent: {
width: this._pathResults.bBoxNotchInsBot!.extent.width * this._scale,
height: this._pathResults.bBoxNotchInsBot!.extent.height * this._scale,
},
coords: {
x: this._pathResults.bBoxNotchInsBot!.coords.x * this._scale,
y: this._pathResults.bBoxNotchInsBot!.coords.y * this._scale,
},
};
}
label: this._label,
labelArgs: this._args.map(({ label }) => label),

// Getter for bounding box of the nest insertion notch
public get bBoxNotchInsNestTop(): { extent: TBrickExtent; coords: TBrickCoords } {
return {
extent: {
width: this._pathResults.bBoxNotchInsNestTop!.extent.width * this._scale,
height: this._pathResults.bBoxNotchInsNestTop!.extent.height * this._scale,
},
coords: {
x: this._pathResults.bBoxNotchInsNestTop!.coords.x * this._scale,
y: this._pathResults.bBoxNotchInsNestTop!.coords.y * this._scale,
},
};
}
boundingBoxArgs: this._args.map(({ id }) => this._boundingBoxArgs[id]),
boundingBoxNest: this._boundingBoxNest,

// Method to return React props for the BrickBlock component
public getReactProps(): Record<string, unknown> {
return {
uuid: this.uuid,
name: this.name,
label: this.label,
glyph: this.glyph,
args: this.args,
colorBg: this.colorBg,
colorFg: this.colorFg,
colorBgHighlight: this.colorBgHighlight,
colorFgHighlight: this.colorFgHighlight,
outline: this.outline,
scale: this.scale,
connectAbove: this.connectAbove,
connectBelow: this.connectBelow,
glyph: this._glyph,
colorBg: !this._highlighted ? this._colorBg : this._colorBgHighlight,
colorFg: !this._highlighted ? this._colorFg : this._colorFgHighlight,
outline: this._outline,
scale: this._scale,
folded: this.folded,
highlighted: this.highlighted,
};
}

// Setters for properties that can change at runtime
public setArgs(
args: Record<
string,
{
label: string;
dataType: TBrickArgDataType;
meta: { argId: string; argLabel: string; argTypeIncoming: string };
}
>,
): void {
this._args = args;
this.updateConnectionPoints();
/** @todo implement correctly */
public setBoundingBoxArg(id: string, extent: TExtent): void {
this._boundingBoxArgs[id] = extent;
}

public setConnectAbove(connectAbove: boolean): void {
this._connectAbove = connectAbove;
public setBoundingBoxNest(extent: TExtent): void {
this._boundingBoxNest = extent;
}

public setConnectBelow(connectBelow: boolean): void {
this._connectBelow = connectBelow;
}

public setFolded(folded?: boolean): void {
// Set folded as optional
this._folded = folded ?? false; // Default to false if not provided
}

public setHighlighted(highlighted: boolean): void {
this.highlighted = highlighted;
}

// Method to update connection points based on current state
protected updateConnectionPoints(): void {
// Update the connection points for the top, bottom, and nest of the block
this._connectionPointsBlock.Top = this.connectAbove ? [{ x: 0, y: 0 }] : [];
this._connectionPointsBlock.Bottom = this.connectBelow ? [{ x: 0, y: 0 }] : [];
this._connectionPointsBlock.TopInner = this.folded ? [] : [{ x: 0, y: 0 }];
}
// // Getter for bounding box of the brick
// public get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords } {
// return {
// extent: {
// width: this._pathResults.bBoxBrick.extent.width * this._scale,
// height: this._pathResults.bBoxBrick.extent.height * this._scale,
// },
// coords: {
// x: this._pathResults.bBoxBrick.coords.x * this._scale,
// y: this._pathResults.bBoxBrick.coords.y * this._scale,
// },
// };
// }

// // Getter for bounding boxes of the arguments
// public get bBoxArgs(): Record<string, { extent: TBrickExtent; coords: TBrickCoords }> {
// const argsKeys = Object.keys(this._args);
// const result: Record<string, { extent: TBrickExtent; coords: TBrickCoords }> = {};

// argsKeys.forEach((key, index) => {
// result[key] = {
// extent: {
// width: this._pathResults.bBoxArgs.extent.width * this._scale,
// height: this._pathResults.bBoxArgs.extent.height * this._scale,
// },
// coords: {
// x: this._pathResults.bBoxArgs.coords[index].x * this._scale,
// y: this._pathResults.bBoxArgs.coords[index].y * this._scale,
// },
// };
// });

// return result;
// }

// // Getter for bounding box of the argument notch
// public get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords } {
// return {
// extent: {
// width: this._pathResults.bBoxNotchArg!.extent.width * this._scale,
// height: this._pathResults.bBoxNotchArg!.extent.height * this._scale,
// },
// coords: {
// x: this._pathResults.bBoxNotchArg!.coords.x * this._scale,
// y: this._pathResults.bBoxNotchArg!.coords.y * this._scale,
// },
// };
// }

// // Getter for bounding box of the top insertion notch
// public get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords } {
// return {
// extent: {
// width: this._pathResults.bBoxNotchInsTop!.extent.width * this._scale,
// height: this._pathResults.bBoxNotchInsTop!.extent.height * this._scale,
// },
// coords: {
// x: this._pathResults.bBoxNotchInsTop!.coords.x * this._scale,
// y: this._pathResults.bBoxNotchInsTop!.coords.y * this._scale,
// },
// };
// }

// // Getter for bounding box of the bottom insertion notch
// public get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords } {
// return {
// extent: {
// width: this._pathResults.bBoxNotchInsBot!.extent.width * this._scale,
// height: this._pathResults.bBoxNotchInsBot!.extent.height * this._scale,
// },
// coords: {
// x: this._pathResults.bBoxNotchInsBot!.coords.x * this._scale,
// y: this._pathResults.bBoxNotchInsBot!.coords.y * this._scale,
// },
// };
// }

// // Getter for bounding box of the nest insertion notch
// public get bBoxNotchInsNestTop(): { extent: TBrickExtent; coords: TBrickCoords } {
// return {
// extent: {
// width: this._pathResults.bBoxNotchInsNestTop!.extent.width * this._scale,
// height: this._pathResults.bBoxNotchInsNestTop!.extent.height * this._scale,
// },
// coords: {
// x: this._pathResults.bBoxNotchInsNestTop!.coords.x * this._scale,
// y: this._pathResults.bBoxNotchInsNestTop!.coords.y * this._scale,
// },
// };
// }

// // Setters for properties that can change at runtime
// public setArgs(
// args: Record<
// string,
// {
// label: string;
// dataType: TBrickArgDataType;
// meta: { argId: string; argLabel: string; argTypeIncoming: string };
// }
// >,
// ): void {
// this._args = args;
// this.updateConnectionPoints();
// }

// // Method to update connection points based on current state
// protected updateConnectionPoints(): void {
// // Update the connection points for the top, bottom, and nest of the block
// this._connectionPointsBlock.Top = this.connectAbove ? [{ x: 0, y: 0 }] : [];
// this._connectionPointsBlock.Bottom = this.connectBelow ? [{ x: 0, y: 0 }] : [];
// this._connectionPointsBlock.TopInner = this.folded ? [] : [{ x: 0, y: 0 }];
// }
}
Loading