From b559510b902cbd2f89917353fc249a1dafdf00b2 Mon Sep 17 00:00:00 2001 From: Anindya Kundu Date: Thu, 5 Sep 2024 12:17:00 +0530 Subject: [PATCH 1/5] docs(masonry): rename specification folders --- .../Masonry_Design_Document.md | 0 .../{PRD => functional-specification}/PRD.md | 0 modules/masonry/docs/tech-spec/TechSpec.md | 383 ------------------ .../Techspec.md | 0 4 files changed, 383 deletions(-) rename modules/masonry/docs/{PRD => functional-specification}/Masonry_Design_Document.md (100%) rename modules/masonry/docs/{PRD => functional-specification}/PRD.md (100%) delete mode 100644 modules/masonry/docs/tech-spec/TechSpec.md rename modules/masonry/docs/{tech-spec => technical-specification}/Techspec.md (100%) diff --git a/modules/masonry/docs/PRD/Masonry_Design_Document.md b/modules/masonry/docs/functional-specification/Masonry_Design_Document.md similarity index 100% rename from modules/masonry/docs/PRD/Masonry_Design_Document.md rename to modules/masonry/docs/functional-specification/Masonry_Design_Document.md diff --git a/modules/masonry/docs/PRD/PRD.md b/modules/masonry/docs/functional-specification/PRD.md similarity index 100% rename from modules/masonry/docs/PRD/PRD.md rename to modules/masonry/docs/functional-specification/PRD.md diff --git a/modules/masonry/docs/tech-spec/TechSpec.md b/modules/masonry/docs/tech-spec/TechSpec.md deleted file mode 100644 index 45b4fcb6..00000000 --- a/modules/masonry/docs/tech-spec/TechSpec.md +++ /dev/null @@ -1,383 +0,0 @@ -# Masonry Framework Tech Spec - -This tech spec outlines the implementation details for the Masonry Framework, a core component of -the MusicBlocks V4 project built with React and TypeScript. - -## Project Structure - -```md -├── src -│ ├── utils -│ │ ├── dragAndDropUtils.ts -│ │ ├── validationUtils.ts -│ │ ├── dataUtils.ts -│ │ ├── quadtreeUtils.ts -│ │ └──... -│ ├── components -│ │ ├── brick -│ │ │ ├── Brick.tsx -│ │ │ ├── BrickInput.tsx -│ │ │ ├── BrickOutput.tsx -│ │ │ ├── DataBrick.tsx -│ │ │ ├── ExpressionBrick.tsx -│ │ │ ├── StatementBrick.tsx -│ │ │ ├── BlockBrick.tsx -│ │ │ └──... -│ │ ├── palette -│ │ │ ├── Palette.tsx -│ │ │ ├── PaletteCategory.tsx -│ │ │ └── PaletteSearch.tsx -│ │ ├── workspace -│ │ │ ├── Workspace.tsx -│ │ │ ├── WorkspaceGrid.tsx -│ │ │ ├── WorkspaceToolbar.tsx -│ │ │ └──... -│ ├── hooks -│ │ ├── useBrick.ts -│ │ ├── useStack.ts -│ │ ├── useWorkspace.ts -│ │ └──... -│ ├── models -│ │ ├── Brick.ts -│ │ ├── Stack.ts -│ │ ├── Workspace.ts -│ │ └──... -│ ├── services -│ │ ├── BrickService.ts -│ │ ├── StackService.ts -│ │ ├── WorkspaceService.ts -│ │ ├── QuadtreeService.ts -│ │ ├── ErrorHandlingService.ts -│ │ └──... -│ ├── App.tsx -│ └── index.tsx -├──... -``` - -## Dependencies - -- React -- TypeScript -- React-aria (for drag-and-drop functionality) -- ... (other relevant libraries) - -## Description - -### Components - -#### a Brick - -- **Brick.tsx:** - - Properties: - - `brick`: The brick model instance. - - `onDragStart`: Callback for drag start event. - - `onDragOver`: Callback for drag-over event. - - `onDrop`: Callback for drop event. - - `onDragEnd`: Callback for drag end event. - - `onClick`: Callback for click event. - - `onDoubleClick`: Callback for double-click event. - - `onContextMenu`: Callback for context menu event. - - `onInputChange`: Callback for input change event. - - `onOutputChange`: Callback for output change event. - - Functions: - - `render()`: Renders the brick component with its visual appearance and input/output ports. - - `handleDragStart()`: Handles the drag start event for the brick. - - `handleDragOver()`: Handles the drag-over event for the brick. - - `handleDrop()`: Handles the drop event for the brick. - - `handleDragEnd()`: Handles the drag end event for the brick. - - `handleClick()`: Handles the click event for the brick. - - `handleDoubleClick()`: Handles the double-click event for the brick. - - `handleContextMenu()`: Handles the context menu event for the brick. - - `handleInputChange()`: Handles the input change event for the brick. - - `handleOutputChange()`: Handles the output change event for the brick. -- **BrickInput.tsx:** - - Properties: - - `brick`: The brick model instance. - - `onConnect`: Callback for connect event. - - `onDisconnect`: Callback for disconnect event. - - Functions: - - `render()`: Renders the input port of the brick. - - `handleConnect()`: Handles the connect event for the input port. - - `handleDisconnect()`: Handles the disconnect event for the input port. -- **BrickOutput.tsx:** - - Properties: - - `brick`: The brick model instance. - - `onConnect`: Callback for connect event. - - `onDisconnect`: Callback for disconnect event. - - Functions: - - `render()`: Renders the output port of the brick. - - `handleConnect()`: Handles the connect event for the output port. - - `handleDisconnect()`: Handles the disconnect event for the output port. -- **DataBrick.tsx:** - - Properties: - - `brick`: The brick model instance. - - `onInputChange`: Callback for input change event. - - `onOutputChange`: Callback for output change event. - - Functions: - - `render()`: Renders the data brick component with its visual appearance and input/output ports. - - `handleInputChange()`: Handles the input change event for the data brick. - - `handleOutputChange()`: Handles the output change event for the data brick. -- **ExpressionBrick.tsx:** - - Properties: - - `brick`: The brick model instance. - - `onInputChange`: Callback for input change event. - - `onOutputChange`: Callback for output change event. - - Functions: - - `render()`: Renders the expression brick component with its visual appearance and input/output - ports. - - `handleInputChange()`: Handles the input change event for the expression brick. - - `handleOutputChange()`: Handles the output change event for the expression brick. -- **StatementBrick.tsx:** - - Properties: - - `brick`: The brick model instance. - - `onInputChange`: Callback for input change event. - - `onOutputChange`: Callback for output change event. - - Functions: - - `render()`: Renders the statement brick component with its visual appearance and input/output ports. - - `handleInputChange()`: Handles the input change event for the statement brick. - - `handleOutputChange()`: Handles the output change event for the statement brick. -- **BlockBrick.tsx:** - - Properties: - - `brick`: The brick model instance. - - `onInputChange`: Callback for input change event. - - `onOutputChange`: Callback for output change event. - - `children`: An array of nested brick instances. - - Functions: - - `render()`: Renders the block brick component with its visual appearance and input/output ports. - - `handleInputChange()`: Handles the input change event for the block brick. - - `handleOutputChange()`: Handles the output change event for the block brick. - - `handleNesting()`: Handles the nesting logic for nested bricks. - - `handleArguments()`: Manages the arguments for block bricks. - -#### b Palette - -- **Palette.tsx:** - - Properties: - - `bricks`: An array of brick model instances. - - `onDragStart`: Callback for drag start event. - - `onDragOver`: Callback for drag-over event. - - `onDrop`: Callback for drop event. - - `onSearch`: Callback for search event. - - `searchQuery`: The current search query. - - Functions: - - `render()`: Renders the palette component with its visual appearance and categories. - - `handleDragStart()`: Handles the drag start event for the palette. - - `handleDragOver()`: Handles the drag-over event for the palette. - - `handleDrop()`: Handles the drop event for the palette. - - `handleSearch()`: Handles the search event for the palette. -- **PaletteCategory.tsx:** - - Properties: - - `category`: The category model instance. - - `bricks`: An array of brick model instances. - - Functions: - - `render()`: Renders the category component with its visual appearance and bricks. -- **PaletteSearch.tsx:** - - Properties: - - `searchQuery`: The current search query. - - `onSearch`: Callback for search event. - - Functions: - - `render()`: Renders the search component with its visual appearance and input field. - - `handleSearch()`: Handles the search event for the search component. - -#### c Workspace - -- **Workspace.tsx:** - - Properties: - - `workspace`: The workspace model instance. - - `onBrickAdd`: Callback for brick add event. - - `onBrickRemove`: Callback for brick remove event. - - `onBrickConnect`: Callback for brick connect event. - - `onBrickDisconnect`: Callback for brick disconnect event. - - `onBrickMove`: Callback for brick move event. - - `onBrickResize`: Callback for brick resize event. - - `onBrickRotate`: Callback for brick rotate event. - - `onUndo`: Callback for undo event. - - `onRedo`: Callback for redo event. - - Functions: - - `render()`: Renders the workspace component with its visual appearance and bricks. - - `handleBrickAdd()`: Handles the brick add event for the workspace. - - `handleBrickRemove()`: Handles the brick remove event for the workspace. - - `handleBrickConnect()`: Handles the brick connect event for the workspace. - - `handleBrickDisconnect()`: Handles the brick disconnect event for the workspace. - - `handleBrickMove()`: Handles the brick move event for the workspace. - - `handleBrickResize()`: Handles the brick resize event for the workspace. - - `handleBrickRotate()`: Handles the brick rotate event for the workspace. - - `handleUndo()`: Handles the undo event for the workspace. - - `handleRedo()`: Handles the redo event for the workspace. -- **WorkspaceGrid.tsx:** - - Properties: - - `gridSize`: The size of the grid. - - `onGridClick`: Callback for grid click event. - - Functions: - - `render()`: Renders the grid component with its visual appearance and grid lines. - - `handleGridClick()`: Handles the grid click event for the grid component. -- **WorkspaceToolbar.tsx:** - - Properties: - - `onUndo`: Callback for undo event. - - `onRedo`: Callback for redo event. - - Functions: - - `render()`: Renders the toolbar component with its visual appearance and buttons. - - `handleUndo()`: Handles the undo event for the toolbar. - - `handleRedo()`: Handles the redo event for the toolbar. - -### Utilities - -- **dragAndDropUtils.ts:** - - Functions: - - `handleDragStart()`: Handles the drag start event for draggable elements. - - `handleDragOver()`: Handles the drag-over event for draggable elements. - - `handleDrop()`: Handles the drop event for draggable elements. - - `handleDragEnd()`: Handles the drag end event for draggable elements. -- **validationUtils.ts:** - - Functions: - - `validateBrickConnection()`: Validates the connection between two bricks. - - `validateBrickPosition()`: Validates the position of a brick in the workspace. - - `validateBrickData()`: Validates the data within a brick. -- **dataUtils.ts:** - - Functions: - - `saveWorkspace()`: Saves the workspace state to local storage or server. - - `loadWorkspace()`: Loads the workspace state from local storage or server. - - `exportWorkspace()`: Exports the workspace state to a file. - - `importWorkspace()`: Imports the workspace state from a file. -- **quadtreeUtils.ts:** - - Functions: - - `insertBrick()`: Inserts a brick into the quadtree for spatial indexing. - - `removeBrick()`: Removes a brick from the quadtree. - - `updateBrick()`: Updates the position of a brick in the quadtree. - - `findNearbyBricks()`: Finds nearby bricks within a certain radius using the quadtree. - -### Hooks - -**a) useBrick:** - -- A hook for managing a single brick. -- Provides an instance of the `Brick` model. -- Handles updating the brick's properties and arguments. -- Properties: - - `brick`: The brick model instance. - - `setBrick()`: A function to update the brick instance. -- Functions: - - `useEffect()`: A React hook for handling side effects. - - `fetchBrick()`: A function to fetch the brick data from the server. - - `useCallback()`: A React hook for memoizing functions. - - `handleInputChange()`: A function to handle input changes for the brick. - - `handleOutputChange()`: A function to handle output changes for the brick. - -**b) useStack:** - -- A hook for managing a stack of bricks. -- Provides an instance of the `Stack` model. -- Handles updating the stack's bricks and connections. -- Properties: - - `stack`: The stack model instance. - - `setStack()`: A function to update the stack instance. -- Functions: - - `useEffect()`: A React hook for handling side effects. - - `fetchStack()`: A function to fetch the stack data from the server. - - `useCallback()`: A React hook for memoizing functions. - - `handleBrickAdd()`: A function to handle adding a brick to the stack. - - `handleBrickRemove()`: A function to handle removing a brick from the stack. - - `handleBrickConnect()`: A function to handle connecting bricks in the stack. - - `handleBrickDisconnect()`: A function to handle disconnecting bricks in the stack. - -**c) useWorkspace:** - -- A hook for managing the workspace state. -- Provides an instance of the `Workspace` model. -- Handles updating the workspace's bricks, connections, and layout. -- Properties: - - `workspace`: The workspace model instance. - - `setWorkspace()`: A function to update the workspace instance. -- Functions: - - `useEffect()`: A React hook for handling side effects. - - `fetchWorkspace()`: A function to fetch the workspace data from the server. - - `useCallback()`: A React hook for memoizing functions. - - `handleBrickAdd()`: A function to handle adding a brick to the workspace. - - `handleBrickRemove()`: A function to handle removing a brick from the workspace. - - `handleBrickConnect()`: A function to handle connecting bricks in the workspace. - - `handleBrickDisconnect()`: A function to handle disconnecting bricks in the workspace. - - `handleBrickMove()`: A function to handle moving a brick in the workspace. - - `handleBrickResize()`: A function to handle resizing a brick in the workspace. - - `handleBrickRotate()`: A function to handle rotating a brick in the workspace. - -### Models - -- **Brick.ts:** - - Properties: - - `id`: Unique identifier for the brick. - - `type`: Type of the brick (data, expression, statement, block). - - `position`: Position of the brick in the workspace. - - `inputs`: Array of input ports for the brick. - - `outputs`: Array of output ports for the brick. - - `data`: Data associated with the brick. - - `boundingBox`: Bounding box coordinates of the brick for collision detection and spatial indexing. - - Functions: - - `connect()`: Connects the brick to another brick. - - `disconnect()`: Disconnects the brick from another brick. - - `move()`: Moves the brick to a new position. - - `resize()`: Resizes the brick. - - `rotate()`: Rotates the brick. - - `calculateBoundingBox()`: Calculates the bounding box of the brick based on its size and position. - - `checkCollision()`: Checks for collision with other bricks or boundaries. - - `handleCollision()`: Handles collision events by adjusting the position or behavior of the brick. - - `updatePosition()`: Updates the position of the brick based on collision resolution or user interaction. - -- **Stack.ts:** - - Properties: - - `id`: Unique identifier for the stack. - - `bricks`: Array of bricks in the stack. - - Functions: - - `addBrick()`: Adds a brick to the stack. - - `removeBrick()`: Removes a brick from the stack. - - `connectBricks()`: Connects two bricks in the stack. - - `disconnectBricks()`: Disconnects two bricks in the stack. -- **Workspace.ts:** - - Properties: - - `id`: Unique identifier for the workspace. - - `stacks`: Array of stacks in the workspace. - - `gridSize`: Size of the grid in the workspace. - - `zoomLevel`: Zoom level of the workspace. - - Functions: - - `addStack()`: Adds a stack to the workspace. - - `removeStack()`: Removes a stack from the workspace. - - `findBrickById()`: Finds a brick in the workspace by its ID. - - `validateWorkspace()`: Validates the workspace state. - - `exportWorkspace()`: Exports the workspace state to a file. - - `importWorkspace()`: Imports the workspace state from a file. - -### Services - -- **BrickService.ts:** - - Functions: - - `createBrick()`: Creates a new brick instance. - - `deleteBrick()`: Deletes a brick instance. - - `updateBrick()`: Updates a brick instance. - - `findBrickById()`: Finds a brick instance by its ID. -- **StackService.ts:** - - Functions: - - `createStack()`: Creates a new stack instance. - - `deleteStack()`: Deletes a stack instance. - - `updateStack()`: Updates a stack instance. - - `findStackById()`: Finds a stack instance by its ID. -- **WorkspaceService.ts:** - - Functions: - - `createWorkspace()`: Creates a new workspace instance. - - `deleteWorkspace()`: Deletes a workspace instance. - - `updateWorkspace()`: Updates a workspace instance. - - `findWorkspaceById()`: Finds a workspace instance by its ID. -- **QuadtreeService.ts:** - - Functions: - - `insertBrick()`: Inserts a brick into the quadtree for spatial indexing. - - `removeBrick()`: Removes a brick from the quadtree. - - `updateBrick()`: Updates the position of a brick in the quadtree. - - `findNearbyBricks()`: Finds nearby bricks within a certain radius using the quadtree. -- **ErrorHandlingService.ts:** - - Functions: - - `handleError()`: Handles errors and exceptions in the application. - - `logError()`: Logs errors to a server or local storage. - -## Testing - -- Write unit tests for components, utilities, and hooks using Jest and React Testing Library. -- Write integration tests for drag-and-drop functionality and state management. -- Write end-to-end tests for the overall workflow using Cypress or Selenium. diff --git a/modules/masonry/docs/tech-spec/Techspec.md b/modules/masonry/docs/technical-specification/Techspec.md similarity index 100% rename from modules/masonry/docs/tech-spec/Techspec.md rename to modules/masonry/docs/technical-specification/Techspec.md From 33e63ec68f7636f84b16716da1b633780be4e795 Mon Sep 17 00:00:00 2001 From: Anindya Kundu Date: Thu, 5 Sep 2024 12:18:10 +0530 Subject: [PATCH 2/5] config(dev): [vscode] update config --- .vscode/settings.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 2ba7ff8c..fd7a62d3 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,7 @@ { - "editor.rulers": [100], + "editor.rulers": [ + 100 + ], "editor.renderWhitespace": "boundary", "editor.defaultFormatter": "esbenp.prettier-vscode", "javascript.updateImportsOnFileMove.enabled": "always", @@ -25,7 +27,7 @@ "editor.suggest.snippetsPreventQuickSuggestions": false, "editor.suggestSelection": "first", "editor.tabCompletion": "onlySnippets", - "editor.wordBasedSuggestions": false + "editor.wordBasedSuggestions": "off" }, "[markdown]": { "editor.wordWrap": "on", From bca5df11ef0770cf9125abce93dc976bcd42b72b Mon Sep 17 00:00:00 2001 From: Anindya Kundu Date: Thu, 5 Sep 2024 12:22:04 +0530 Subject: [PATCH 3/5] config(dev): [markdownlint] update old properties --- .markdownlint.jsonc | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/.markdownlint.jsonc b/.markdownlint.jsonc index 25310649..c2481488 100644 --- a/.markdownlint.jsonc +++ b/.markdownlint.jsonc @@ -81,8 +81,6 @@ "tables": true, // Include headings "headings": true, - // Include headings - "headers": true, // Strict length checking "strict": false, // Stern length checking @@ -118,9 +116,7 @@ // MD024/no-duplicate-heading/no-duplicate-header - Multiple headings with the same content "MD024": { // Only check sibling headings - "allow_different_nesting": true, - // Only check sibling headings - "siblings_only": false + "siblings_only": true }, // MD025/single-title/single-h1 - Multiple top-level headings in the same document From 81bf7d83d390445b5c12a6c8aa529a8feb6ea4f3 Mon Sep 17 00:00:00 2001 From: Anindya Kundu Date: Thu, 5 Sep 2024 17:06:08 +0530 Subject: [PATCH 4/5] feat(masonry): [brick] update models --- modules/masonry/src/@types/brick.d.ts | 194 +++++++------- modules/masonry/src/brick/model.ts | 359 ++++++++++++-------------- 2 files changed, 247 insertions(+), 306 deletions(-) diff --git a/modules/masonry/src/@types/brick.d.ts b/modules/masonry/src/@types/brick.d.ts index ab410a51..d50bac6b 100644 --- a/modules/masonry/src/@types/brick.d.ts +++ b/modules/masonry/src/@types/brick.d.ts @@ -10,17 +10,11 @@ export type TBrickKind = 'instruction' | 'argument'; */ export type TBrickType = 'data' | 'expression' | 'statement' | 'block'; -/** - * @type - * Data type (boolean, number, string, any) returned by an argument brick. - */ -export type TBrickArgDataType = 'boolean' | 'number' | 'string' | 'any'; - /** * @type * Bounding box dimensions of a brick. */ -export type TBrickExtent = { +export type TExtent = { width: number; height: number; }; @@ -29,7 +23,7 @@ export type TBrickExtent = { * @type * Position co-ordinates of a brick. */ -export type TBrickCoords = { +export type TCoords = { /** relative x co-ordinate */ x: number; /** relative y co-ordinate */ @@ -38,68 +32,73 @@ export type TBrickCoords = { /** * @type - * Defines color property of a brick. Supported types are RGC, HSL, and hexadecimal. + * Defines color property of a brick. Supported types are RGB, HSL, and hexadecimal. */ -export type TBrickColor = ['rgb' | 'hsl', number, number, number] | string; +export type TColor = ['rgb' | 'hsl', number, number, number] | string; // ------------------------------------------------------------------------------------------------- -/** - * @interface - * Style properties of a generic brick. - */ -export interface IBrickStyle { - /** background color */ - get colorBg(): TBrickColor; - /** foreground color */ - get colorFg(): TBrickColor; - /** outline/stroke color */ - get outline(): TBrickColor; - /** scale factor of the brick SVG */ - get scale(): number; -} +type TBrickRenderProps = { + path: string; + label: string; + glyph: string; + colorBg: TColor; + colorFg: TColor; + outline: TColor; + scale: number; +}; + +export type TBrickRenderPropsData = TBrickRenderProps & { + // reserving spot for future-proofing +}; + +export type TBrickRenderPropsExpression = TBrickRenderProps & { + labelArgs: string[]; + boundingBoxArgs: TExtent[]; +}; + +export type TBrickRenderPropsStatement = TBrickRenderProps & { + labelArgs: string[]; + boundingBoxArgs: TExtent[]; +}; + +export type TBrickRenderPropsBlock = TBrickRenderProps & { + labelArgs: string[]; + boundingBoxArgs: TExtent[]; + boundingBoxNest: TExtent; + folded: boolean; +}; + +// ------------------------------------------------------------------------------------------------- /** * @interface * Arguments for a brick. */ export interface IBrickArgs { - /** map of argument ID to data associated with the argument */ - get args(): Record< - string, - { - /** argument label */ - label: string; - /** data type returned by the argument brick */ - dataType: TBrickArgDataType; - /** metadata — reserved for future-proofing */ - meta: unknown; - } - >; -} + /** list of argument connection points of the brick */ + get connPointsArg(): { + [id: string]: { + /** bounding box dimensions of the connection point */ + extent: TExtent; + /** co-ordinates of the connection point */ + coords: TCoords; + }; + }; -/** - * @interface - * State properties associated with bricks that can take arguments. - */ -export interface IBrickArgsState { - /** Map of argument ID to corresponding extent and coords */ - get bBoxArgs(): Record< - string, - { - /** Bounding box dimensions */ - extent: TBrickExtent; - /** Co-ordinates of the argument connections relative to the brick */ - coords: TBrickCoords; - } - >; + /** + * Sets the bounding box extents for an arg + * @param id arg identifier + * @param extent width and height values of the arg + */ + setBoundingBoxArg(id: string, extent: TExtent): void; } /** * @interface * Type definition of a generic brick (any type). */ -export interface IBrick extends IBrickStyle { +export interface IBrick { /** unique ID of the brick */ get uuid(): string; /** name of the brick — to be used for internal bookkeeping */ @@ -108,64 +107,44 @@ export interface IBrick extends IBrickStyle { get kind(): TBrickKind; /** type of the brick */ get type(): TBrickType; - /** label for the brick */ - get label(): string; - /** glyph icon associated with the brick */ - get glyph(): string; - // states /** whether brick is highlighted */ - highlighted: boolean; - /** Bounding box dimensions and coords of the brick */ - get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords }; - - /** SVG string for the brick based on defining properties and current state */ - get SVGpath(): string; + set highlighted(value: boolean); + /** current vector scale factor */ + set scale(value: number); + + /** bounding box dimensions of the brick */ + get boundingBox(): TExtent; + /** list of fixed connection points of the brick */ + get connPointsFixed(): Record< + string, + { + /** bounding box dimensions of the connection point */ + extent: TExtent; + /** co-ordinates of the connection point */ + coords: TCoords; + } + >; } /** * @interface * Type definition of a generic argument brick (data or expression type). */ +// eslint-disable-next-line @typescript-eslint/no-empty-interface export interface IBrickArgument extends IBrick { - /** data type returned by an argument brick */ - get dataType(): TBrickArgDataType; - - /** Bounding box dimensions and coords of the left notch */ - get bBoxNotchArg(): { - /** Bounding box dimensions of the left notch */ - extent: TBrickExtent; - /** Co-ordinates of the left notch relative to the brick */ - coords: TBrickCoords; - }; + // reserving spot for future-proofing } /** * @interface * Type definition of a generic instruction brick (statement or block type). */ -export interface IBrickInstruction extends IBrick, IBrickArgs, IBrickArgsState { - // style +export interface IBrickInstruction extends IBrick, IBrickArgs { /** is connection allowed above the brick */ get connectAbove(): boolean; /** is connection allowed below the brick */ get connectBelow(): boolean; - - /** Bounding box dimensions and coords of the top instruction notch */ - get bBoxNotchInsTop(): { - /** Bounding box dimensions of the top instruction notch */ - extent: TBrickExtent; - /** Co-ordinates of the top instruction notch relative to the brick */ - coords: TBrickCoords; - }; - - /** Bounding box dimensions and coords of the bottom instruction notch */ - get bBoxNotchInsBot(): { - /** Bounding box dimensions of the bottom instruction notch */ - extent: TBrickExtent; - /** Co-ordinates of the bottom instruction notch relative to the brick */ - coords: TBrickCoords; - }; } /** @@ -179,24 +158,27 @@ export interface IBrickData extends IBrickArgument { get value(): undefined | boolean | number | string; /** (if dynamic) input mode for the brick (checkbox, number box, text box, dropdown, etc.) */ get input(): undefined | 'boolean' | 'number' | 'string' | 'options'; + + /** list of properties required to render the data brick graphic */ + get renderProps(): IBrickRenderPropsData; } /** * @interface * Type definition of an argument brick. */ -// eslint-disable-next-line @typescript-eslint/no-empty-interface export interface IBrickExpression extends IBrickArgument, IBrickArgs, IBrickArgsState { - // reserving spot for future-proofing + /** list of properties required to render the expression brick graphic */ + get renderProps(): IBrickRenderPropsExpression; } /** * @interface * Type definition of a statement brick. */ -// eslint-disable-next-line @typescript-eslint/no-empty-interface export interface IBrickStatement extends IBrickInstruction { - // reserving spot for future-proofing + /** list of properties required to render the statement brick graphic */ + get renderProps(): IBrickRenderPropsStatement; } /** @@ -204,17 +186,15 @@ export interface IBrickStatement extends IBrickInstruction { * Type definition of a block brick. */ export interface IBrickBlock extends IBrickInstruction, IBrickNotchInsNestTopState { - // state - /** combined bounding box of the instructions nested within the brick */ - get nestExtent(): TBrickExtent; /** whether brick nesting is hidden */ - folded: boolean; + set folded(value: boolean); - /** Bounding box dimensions and coords of the top instruction notch of the nesting */ - get bBoxNotchInsNestTop(): { - /** Bounding box dimensions of the top instruction notch of the nesting */ - extent: TBrickExtent; - /** Co-ordinates of the top instruction notch of the nesting relative to the brick */ - coords: TBrickCoords; - }; + /** list of properties required to render the block brick graphic */ + get renderProps(): IBrickRenderPropsBlock; + + /** + * Sets the bounding box extents for the nested area + * @param extent width and height values of the nest area + */ + setBoundingBoxNest(extent: TExtent): void; } diff --git a/modules/masonry/src/brick/model.ts b/modules/masonry/src/brick/model.ts index 636ec414..dbbbceb5 100644 --- a/modules/masonry/src/brick/model.ts +++ b/modules/masonry/src/brick/model.ts @@ -6,12 +6,15 @@ import type { IBrickExpression, IBrickInstruction, IBrickStatement, - TBrickArgDataType, - TBrickColor, - TBrickCoords, - TBrickExtent, + TBrickRenderPropsData, + TBrickRenderPropsExpression, + TBrickRenderPropsStatement, + TBrickRenderPropsBlock, TBrickKind, TBrickType, + TColor, + TCoords, + TExtent, } from '@/@types/brick'; /** @@ -20,106 +23,87 @@ import type { * Defines the data model of a generic brick. */ abstract class BrickModel implements IBrick { - // intrinsic protected _uuid: string; protected _name: string; protected _kind: TBrickKind; protected _type: TBrickType; + protected _label: string; protected _glyph: string; - // style - protected _colorBg: TBrickColor; - protected _colorFg: TBrickColor; - protected _colorBgHighlight: TBrickColor; - protected _colorFgHighlight: TBrickColor; - protected _outline: TBrickColor; - - public highlighted = false; - protected _scale: number; - - // Common connection points - protected _connectionPoints: { - ArgsIncoming?: TBrickCoords[]; - ArgsOutgoing?: TBrickCoords[]; - }; + protected _colorBg: TColor; + protected _colorFg: TColor; + protected _colorBgHighlight: TColor; + protected _colorFgHighlight: TColor; + protected _outline: TColor; + + protected _highlighted = false; + protected _scale = 1; constructor(params: { + /** unique ID */ uuid: string; + /** name — to be used for internal bookkeeping */ name: string; + /** kind — instruction or argument */ kind: TBrickKind; + /** type — data, expression, statement, or block */ type: TBrickType; + /** primary label */ label: string; - glyph: string; - colorBg: TBrickColor; - colorFg: TBrickColor; - colorBgHighlight: TBrickColor; - colorFgHighlight: TBrickColor; - outline: TBrickColor; - scale: number; + /** glyph icon associated with the brick */ + glyph?: string; + /** primary background color */ + colorBg: TColor; + /** primary foreground color */ + colorFg: TColor; + /** highlighted state background color */ + colorBgHighlight: TColor; + /** highlighted state foreground color */ + colorFgHighlight: TColor; + /** outline/stroke color */ + outline: TColor; }) { this._uuid = params.uuid; this._name = params.name; this._kind = params.kind; this._type = params.type; + this._label = params.label; - this._glyph = params.glyph; + this._glyph = params.glyph ?? ''; this._colorBg = params.colorBg; this._colorFg = params.colorFg; this._colorBgHighlight = params.colorBgHighlight; this._colorFgHighlight = params.colorFgHighlight; this._outline = params.outline; - this._scale = params.scale; - this._connectionPoints = {}; } - // Getters public get uuid(): string { return this._uuid; } + public get name(): string { return this._name; } + public get kind(): TBrickKind { return this._kind; } + public get type(): TBrickType { return this._type; } - public get label(): string { - return this._label; - } - public get glyph(): string { - return this._glyph; - } - public get colorBg(): TBrickColor { - return this._colorBg; - } - public get colorFg(): TBrickColor { - return this._colorFg; - } - public get colorBgHighlight(): TBrickColor { - return this._colorBgHighlight; - } - public get colorFgHighlight(): TBrickColor { - return this._colorFgHighlight; - } - public get outline(): TBrickColor { - return this._outline; - } - public get scale(): number { - return this._scale; + + public set highlighted(value: boolean) { + this._highlighted = value; } - public get connectionPoints(): { - ArgsIncoming?: TBrickCoords[]; - ArgsOutgoing?: TBrickCoords[]; - } { - return this._connectionPoints; + + public set scale(value: number) { + this._scale = value; } - public abstract get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords }; - public abstract get SVGpath(): string; + public abstract get boundingBox(): TExtent; - protected abstract updateConnectionPoints(): void; + public abstract get connPointsFixed(): Record; } /** @@ -128,35 +112,26 @@ abstract class BrickModel implements IBrick { * Defines the data model of a generic argument brick. */ abstract class BrickModelArgument extends BrickModel implements IBrickArgument { - protected _dataType: TBrickArgDataType; - protected _argExtents: Map = new Map(); - constructor(params: { - uuid: string; // Added uuid - name: string; // Added name + uuid: string; + name: string; type: TBrickType; + label: string; - glyph: string; - dataType: TBrickArgDataType; - colorBg: TBrickColor; - colorFg: TBrickColor; - colorBgHighlight: TBrickColor; - colorFgHighlight: TBrickColor; - outline: TBrickColor; - scale: number; + glyph?: string; + colorBg: TColor; + colorFg: TColor; + colorBgHighlight: TColor; + colorFgHighlight: TColor; + outline: TColor; }) { super({ ...params, kind: 'argument' }); - this._dataType = params.dataType; } - public get dataType(): TBrickArgDataType { - return this._dataType; - } - public get argExtents(): Map { - return this._argExtents; - } - - public abstract get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords }; + public abstract get connPointsFixed(): Record< + 'argOutgoing', + { extent: TExtent; coords: TCoords } + >; } /** @@ -165,52 +140,52 @@ abstract class BrickModelArgument extends BrickModel implements IBrickArgument { * Defines the data model of a generic instruction brick. */ abstract class BrickModelInstruction extends BrickModel implements IBrickInstruction { - protected _args: Record; protected _connectAbove: boolean; protected _connectBelow: boolean; - protected _argExtents: Map = new Map(); + + protected _args: { id: string; label: string }[] = []; constructor(params: { - uuid: string; // Added uuid - name: string; // Added name + uuid: string; + name: string; type: TBrickType; + label: string; - glyph: string; - args: Record; - 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; + + args: { + /** unique identifier of the argument */ + id: string; + /** label for the argument */ + label: string; + }[]; }) { super({ ...params, kind: 'instruction' }); - this._args = params.args; + this._connectAbove = params.connectAbove; this._connectBelow = params.connectBelow; - } - public get args(): Record< - string, - { label: string; dataType: TBrickArgDataType; meta: unknown } - > { - return this._args; + this._args = params.args; } + public get connectAbove(): boolean { return this._connectAbove; } + public get connectBelow(): boolean { return this._connectBelow; } - public get argExtents(): Map { - return this._argExtents; - } - public abstract get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords }; - public abstract get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords }; - public abstract get bBoxArgs(): Record; + public abstract get connPointsArg(): { [id: string]: { extent: TExtent; coords: TCoords } }; + + public abstract setBoundingBoxArg(id: string, extent: TExtent): void; } /** @@ -224,40 +199,41 @@ export abstract class BrickModelData extends BrickModelArgument implements IBric protected _input?: 'boolean' | 'number' | 'string' | 'options'; constructor(params: { - uuid: string; // Added uuid + uuid: string; name: string; + label: string; - glyph: string; - dataType: TBrickArgDataType; + glyph?: string; + colorBg: TColor; + colorFg: TColor; + colorBgHighlight: TColor; + colorFgHighlight: TColor; + outline: TColor; + dynamic: boolean; value?: boolean | number | string; input?: 'boolean' | 'number' | 'string' | 'options'; - colorBg: TBrickColor; - colorFg: TBrickColor; - colorBgHighlight: TBrickColor; - colorFgHighlight: TBrickColor; - outline: TBrickColor; - scale: number; }) { super({ ...params, type: 'data' }); + this._dynamic = params.dynamic; this._value = params.value; this._input = params.input; - this._connectionPoints.ArgsOutgoing = []; - this.updateConnectionPoints(); } public get dynamic(): boolean { return this._dynamic; } + public get value(): boolean | number | string | undefined { return this._value; } + public get input(): 'boolean' | 'number' | 'string' | 'options' | undefined { return this._input; } - protected abstract updateConnectionPoints(): void; + public abstract get renderProps(): TBrickRenderPropsData; } /** @@ -266,39 +242,37 @@ export abstract class BrickModelData extends BrickModelArgument implements IBric * Defines the data model of an expression brick. */ export abstract class BrickModelExpression extends BrickModelArgument implements IBrickExpression { - protected _args: Record; + protected _args: { id: string; label: string }[] = []; constructor(params: { - uuid: string; // Added uuid + uuid: string; name: string; + label: string; - glyph: string; - dataType: TBrickArgDataType; - args: Record; - colorBg: TBrickColor; - colorFg: TBrickColor; - colorBgHighlight: TBrickColor; - colorFgHighlight: TBrickColor; - outline: TBrickColor; - scale: number; + glyph?: string; + colorBg: TColor; + colorFg: TColor; + colorBgHighlight: TColor; + colorFgHighlight: TColor; + outline: TColor; + + args: { + /** unique identifier of the argument */ + id: string; + /** label for the argument */ + label: string; + }[]; }) { super({ ...params, type: 'expression' }); + this._args = params.args; - this._connectionPoints.ArgsIncoming = []; - this._connectionPoints.ArgsOutgoing = []; - this.updateConnectionPoints(); } - public get args(): Record< - string, - { label: string; dataType: TBrickArgDataType; meta: unknown } - > { - return this._args; - } + public abstract get connPointsArg(): { [id: string]: { extent: TExtent; coords: TCoords } }; - public abstract get bBoxArgs(): Record; + public abstract setBoundingBoxArg(id: string, extent: TExtent): void; - protected abstract updateConnectionPoints(): void; + public abstract get renderProps(): TBrickRenderPropsExpression; } /** @@ -308,26 +282,35 @@ export abstract class BrickModelExpression extends BrickModelArgument implements */ export abstract class BrickModelStatement extends BrickModelInstruction implements IBrickStatement { constructor(params: { - uuid: string; // Added uuid + uuid: string; name: string; + label: string; glyph: string; - args: Record; - colorBg: TBrickColor; - colorFg: TBrickColor; - colorBgHighlight: TBrickColor; - colorFgHighlight: TBrickColor; - outline: TBrickColor; - scale: number; + colorBg: TColor; + colorFg: TColor; + colorBgHighlight: TColor; + colorFgHighlight: TColor; + outline: TColor; connectAbove: boolean; connectBelow: boolean; + + args: { + /** unique identifier of the argument */ + id: string; + /** label for the argument */ + label: string; + }[]; }) { super({ ...params, type: 'statement' }); - this._connectionPoints.ArgsOutgoing = []; - this.updateConnectionPoints(); } - protected abstract updateConnectionPoints(): void; + public abstract get connPointsFixed(): Record< + 'insTop' | 'insBottom', + { extent: TExtent; coords: TCoords } + >; + + public abstract get renderProps(): TBrickRenderPropsStatement; } /** @@ -336,64 +319,42 @@ export abstract class BrickModelStatement extends BrickModelInstruction implemen * Defines the data model of a block brick. */ export abstract class BrickModelBlock extends BrickModelInstruction implements IBrickBlock { - public nestExtent: TBrickExtent = { width: 0, height: 0 }; protected _folded = false; - protected _connectionPointsBlock: { - Top: TBrickCoords[]; - Bottom: TBrickCoords[]; - TopInner: TBrickCoords[]; - }; - constructor(params: { - uuid: string; // Added uuid + 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; + + args: { + /** unique identifier of the argument */ + id: string; + /** label for the argument */ + label: string; + }[]; }) { super({ ...params, type: 'block' }); - this._connectionPointsBlock = { - Top: [], - Bottom: [], - TopInner: [], - }; - this._connectionPoints.ArgsIncoming = []; - this.updateConnectionPoints(); } - public get folded(): boolean { - return this._folded; + public set folded(value: boolean) { + this._folded = value; } - public get connectionPointsBlock(): { - Top: TBrickCoords[]; - Bottom: TBrickCoords[]; - TopInner: TBrickCoords[]; - } { - return this._connectionPointsBlock; - } + public abstract get connPointsFixed(): Record< + 'insTop' | 'insBottom' | 'insNest', + { extent: TExtent; coords: TCoords } + >; - public abstract get bBoxNotchInsNestTop(): { extent: TBrickExtent; coords: TBrickCoords }; + public abstract get renderProps(): TBrickRenderPropsBlock; - protected abstract updateConnectionPoints(): void; + public abstract setBoundingBoxNest(extent: TExtent): void; } From 94e1e28e265f493fecfbd62504013f0ace452af1 Mon Sep 17 00:00:00 2001 From: Anindya Kundu Date: Thu, 5 Sep 2024 17:06:48 +0530 Subject: [PATCH 5/5] feat(masonry): [design0/block] update concrete model --- .../masonry/src/brick/design0/BrickBlock.ts | 340 ++++++++++-------- 1 file changed, 181 insertions(+), 159 deletions(-) diff --git a/modules/masonry/src/brick/design0/BrickBlock.ts b/modules/masonry/src/brick/design0/BrickBlock.ts index 9b4fbab2..c0feb5aa 100644 --- a/modules/masonry/src/brick/design0/BrickBlock.ts +++ b/modules/masonry/src/brick/design0/BrickBlock.ts @@ -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; + private _boundingBoxArgs: Record = {}; + 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 { - const argsKeys = Object.keys(this._args); - const result: Record = {}; - - 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 { - 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 { + // const argsKeys = Object.keys(this._args); + // const result: Record = {}; + + // 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 }]; + // } }