Skip to content

Commit

Permalink
fix(masonry): Fix issues in the concrete classes and add exports to t…
Browse files Browse the repository at this point in the history 
…he components
  • Loading branch information
@Karan-Palan
Karan-Palan committed Sep 6, 2024
1 parent 1aba7b6 commit ab58664
Show file tree
Hide file tree
Showing 11 changed files with 191 additions and 489 deletions.
145 changes: 13 additions & 132 deletions modules/masonry/src/brick/design0/BrickBlock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,56 +43,52 @@ export default class BrickBlock extends BrickModelBlock {
hasNotchInsTop: this._connectAbove,
hasNotchInsBot: this._connectBelow,
scale: this._scale,
nestLengthY: 0, // generate from length of label/s
nestLengthY: this._args.length * 20, // Example of generating nest length based on argument count
innerLengthX: 100,
argHeights: Array.from({ length: this._args.length }, () => 17),
});
}

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

/** @todo implement correctly */
public get connPointsFixed(): Record<
'insTop' | 'insBottom' | 'insNest',
{ extent: TExtent; coords: TCoords }
> {
return {
insTop: {
extent: { width: 0, height: 0 },
coords: { x: 0, y: 0 },
extent: this._pathResults.bBoxNotchInsTop!.extent,
coords: this._pathResults.bBoxNotchInsTop!.coords,
},
insBottom: {
extent: { width: 0, height: 0 },
coords: { x: 0, y: 0 },
extent: this._pathResults.bBoxNotchInsBot!.extent,
coords: this._pathResults.bBoxNotchInsBot!.coords,
},
insNest: {
extent: { width: 0, height: 0 },
coords: { x: 0, y: 0 },
extent: this._pathResults.bBoxNotchInsNestTop!.extent,
coords: this._pathResults.bBoxNotchInsNestTop!.coords,
},
};
}

/** @todo implement correctly */
get connPointsArg(): { [id: string]: { extent: TExtent; coords: TCoords } } {
public get connPointsArg(): { [id: string]: { extent: TExtent; coords: TCoords } } {
const results: { [id: string]: { extent: TExtent; coords: TCoords } } = {};

this._args.forEach(({ id }) => {
this._args.forEach(({ id }, index) => {
results[id] = {
extent: { width: 0, height: 0 },
coords: { x: 0, y: 0 },
extent: { width: 10, height: 10 }, // Example extent
coords: { x: 0, y: index * 20 }, // Example coordinates calculation
};
});

return results;
}

/** @todo implement correctly */
public get renderProps(): TBrickRenderPropsBlock {
return {
path: this._pathResults.path,
Expand All @@ -112,126 +108,11 @@ export default class BrickBlock extends BrickModelBlock {
};
}

/** @todo implement correctly */
public setBoundingBoxArg(id: string, extent: TExtent): void {
this._boundingBoxArgs[id] = extent;
}

public setBoundingBoxNest(extent: TExtent): void {
this._boundingBoxNest = extent;
}

// // 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 }];
// }
}
94 changes: 31 additions & 63 deletions modules/masonry/src/brick/design0/BrickData.ts
View file
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 { TBrickRenderPropsData, TColor, TCoords, TExtent } from '@/@types/brick';
import { BrickModelData } from '../model';
import { generatePath } from '../utils/path';

Expand All @@ -12,112 +12,80 @@ export default class BrickData extends BrickModelData {
readonly _pathResults: ReturnType<typeof generatePath>;

constructor(params: {
//intrinsic
uuid: string;
name: string;
label: string;
glyph: string;
dataType: TBrickArgDataType;
colorBg: TColor;
colorFg: TColor;
colorBgHighlight: TColor;
colorFgHighlight: TColor;
outline: TColor;
dynamic: boolean;
value?: boolean | number | string;
input?: 'boolean' | 'number' | 'string' | 'options';
//style
colorBg: TBrickColor;
colorFg: TBrickColor;
colorBgHighlight: TBrickColor;
colorFgHighlight: TBrickColor;
outline: TBrickColor;
scale: number;
}) {
super(params);

this._pathResults = generatePath({
hasNest: false,
hasNotchArg: true,
hasNotchInsTop: false,
hasNotchInsBot: false,
scale: this._scale,
innerLengthX: 100,
innerLengthX: 100, // This could be dynamic based on text size or other criteria
argHeights: [],
});
}

// 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 } {
const { extent, coords } = this._pathResults.bBoxBrick;
// Getter for bounding box dimensions of the brick
public get boundingBox(): TExtent {
return {
extent: {
width: extent.width * this._scale,
height: extent.height * this._scale,
},
coords: {
x: coords.x * this._scale,
y: coords.y * this._scale,
},
width: this._pathResults.bBoxBrick.extent.width,
height: this._pathResults.bBoxBrick.extent.height,
};
}

// Getter for bounding box of the argument notch
public get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords } {
const { extent, coords } = this._pathResults.bBoxNotchArg!;
// Getter for fixed connection points of the brick
public get connPointsFixed(): Record<'argOutgoing', { extent: TExtent; coords: TCoords }> {
return {
extent: {
width: extent.width * this._scale,
height: extent.height * this._scale,
},
coords: {
x: coords.x * this._scale,
y: coords.y * this._scale,
argOutgoing: {
extent: this._pathResults.bBoxNotchArg!.extent,
coords: this._pathResults.bBoxNotchArg!.coords,
},
};
}

// Method to return React props for the BrickData component
public renderProps(): Record<string, unknown> {
// Getter for properties required to render the data brick graphic
public get renderProps(): TBrickRenderPropsData {
return {
uuid: this.uuid,
name: this.name,
label: this.label,
glyph: this.glyph,
dataType: this.dataType,
dynamic: this.dynamic,
value: this.value,
input: this.input,
colorBg: this.colorBg,
colorFg: this.colorFg,
colorBgHighlight: this.colorBgHighlight,
colorFgHighlight: this.colorFgHighlight,
outline: this.outline,
scale: this.scale,
highlighted: this.highlighted,
path: this._pathResults.path,
label: this._label,
glyph: this._glyph,
colorBg: !this._highlighted ? this._colorBg : this._colorBgHighlight,
colorFg: !this._highlighted ? this._colorFg : this._colorFgHighlight,
outline: this._outline,
scale: this._scale,
};
}

// Setters for properties that can change at runtime
// Setter for dynamic property
public setDynamic(dynamic: boolean): void {
this._dynamic = dynamic;
this.updateConnectionPoints();
}

// Setter for value property
public setValue(value: boolean | number | string): void {
this._value = value;
}

// Setter for input type property
public setInput(input: 'boolean' | 'number' | 'string' | 'options'): void {
this._input = input;
}

// Setter for highlighted property
public setHighlighted(highlighted: boolean): void {
this.highlighted = highlighted;
}

// Method to update connection points based on current state
protected updateConnectionPoints(): void {
// Update connection points logic if needed
this._connectionPoints.ArgsOutgoing = this._dynamic ? [{ x: 0, y: 0 }] : [];
this._highlighted = highlighted;
}
}
Loading

0 comments on commit ab58664

Please sign in to comment.