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): Implement final classes for BrickExpression and BrickS…
…tatement
  • Loading branch information
Karan-Palan committed Sep 4, 2024
commit f52f067a4f5ff1c00a64ad5e56c1afee7b8d43a7
55 changes: 50 additions & 5 deletions modules/masonry/src/brick/design0/BrickExpression.ts
Original file line number Diff line number Diff line change
@@ -10,11 +10,9 @@ import { generatePath } from '../utils/path';
*/
export default class BrickExpression extends BrickModelExpression {
readonly _pathResults: ReturnType<typeof generatePath>;
readonly id: string;

constructor(params: {
// intrinsic
id: string;
uuid: string;
name: string;
label: string;
glyph: string;
@@ -27,14 +25,14 @@ export default class BrickExpression extends BrickModelExpression {
meta: unknown;
}
>;
// style
colorBg: TBrickColor;
colorFg: TBrickColor;
colorBgHighlight: TBrickColor;
colorFgHighlight: TBrickColor;
outline: TBrickColor;
scale: number;
}) {
super(params);
this.id = params.id;
const argsKeys = Object.keys(this._args);
this._pathResults = generatePath({
hasNest: false,
@@ -47,10 +45,12 @@ export default class BrickExpression extends BrickModelExpression {
});
}

// Getter for SVG path
public get SVGpath(): string {
return this._pathResults.path;
}

// Getter for bounding box of the brick
public get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords } {
return {
extent: {
@@ -64,6 +64,7 @@ export default class BrickExpression extends BrickModelExpression {
};
}

// 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 }> = {};
@@ -84,6 +85,7 @@ export default class BrickExpression extends BrickModelExpression {
return result;
}

// Getter for bounding box of the argument notch
public get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords } {
return {
extent: {
@@ -96,4 +98,47 @@ export default class BrickExpression extends BrickModelExpression {
},
};
}

// Method to return React props for the BrickExpression component
public getReactProps(): Record<string, unknown> {
return {
uuid: this.uuid,
name: this.name,
label: this.label,
glyph: this.glyph,
dataType: this.dataType,
args: this.args,
colorBg: this.colorBg,
colorFg: this.colorFg,
colorBgHighlight: this.colorBgHighlight,
colorFgHighlight: this.colorFgHighlight,
outline: this.outline,
scale: this.scale,
highlighted: this.highlighted,
};
}

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

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

// Method to update connection points based on current state
protected updateConnectionPoints(): void {
this._connectionPoints.ArgsIncoming = Object.keys(this._args).map((_, index) => ({
x: 0,
y: index * 20,
}));
this._connectionPoints.ArgsOutgoing = Object.keys(this._args).map((_, index) => ({
x: 0,
y: index * 20,
}));
}
}
60 changes: 55 additions & 5 deletions modules/masonry/src/brick/design0/BrickStatement.ts
Original file line number Diff line number Diff line change
@@ -10,11 +10,9 @@ import { generatePath } from '../utils/path';
*/
export default class BrickStatement extends BrickModelStatement {
readonly _pathResults: ReturnType<typeof generatePath>;
readonly id: string;

constructor(params: {
// intrinsic
id: string;
uuid: string;
name: string;
label: string;
glyph: string;
@@ -26,16 +24,16 @@ export default class BrickStatement extends BrickModelStatement {
meta: unknown;
}
>;
// style
colorBg: TBrickColor;
colorFg: TBrickColor;
colorBgHighlight: TBrickColor;
colorFgHighlight: TBrickColor;
outline: TBrickColor;
scale: number;
connectAbove: boolean;
connectBelow: boolean;
}) {
super(params);
this.id = params.id;
const argsKeys = Object.keys(this._args);
this._pathResults = generatePath({
hasNest: false,
@@ -48,10 +46,12 @@ export default class BrickStatement extends BrickModelStatement {
});
}

// Getter for SVG path
public get SVGpath(): string {
return this._pathResults.path;
}

// Getter for bounding box of the brick
public get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords } {
return {
extent: {
@@ -65,6 +65,7 @@ export default class BrickStatement extends BrickModelStatement {
};
}

// 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 }> = {};
@@ -85,6 +86,7 @@ export default class BrickStatement extends BrickModelStatement {
return result;
}

// Getter for bounding box of the top insertion notch
public get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords } {
return {
extent: {
@@ -98,6 +100,7 @@ export default class BrickStatement extends BrickModelStatement {
};
}

// Getter for bounding box of the bottom insertion notch
public get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords } {
return {
extent: {
@@ -110,4 +113,51 @@ export default class BrickStatement extends BrickModelStatement {
},
};
}

// Method to return React props for the BrickStatement 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,
highlighted: this.highlighted,
};
}

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

public setConnectAbove(connectAbove: boolean): void {
this._connectAbove = connectAbove;
}

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

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 and bottom of the brick
this._connectionPoints.ArgsIncoming = this.connectAbove ? [{ x: 0, y: 0 }] : [];
this._connectionPoints.ArgsOutgoing = this.connectBelow ? [{ x: 0, y: 0 }] : [];
}
}
Loading