This commit is contained in:
Ashish Jain
2024-08-27 13:53:23 +02:00
parent 75f755b823
commit 9b7f5ed963
2 changed files with 41 additions and 12 deletions

View File

@@ -207,9 +207,11 @@ To ensure the robustness of the flowchart shapes, there are implementation of co
To run the Cypress tests, follow these steps: To run the Cypress tests, follow these steps:
1. Ensure you have all dependencies installed by running: 1. Ensure you have all dependencies installed by running:
```bash ```bash
npm install npm install
``` ```
2. Start the Cypress test runner: 2. Start the Cypress test runner:
```bash ```bash

View File

@@ -11,6 +11,7 @@ Before starting with shape creation, it's essential to familiarize yourself with
## Available Utilities ## Available Utilities
### 1. `labelHelper` ### 1. `labelHelper`
- **Purpose**: This function creates and inserts labels inside SVG shapes. - **Purpose**: This function creates and inserts labels inside SVG shapes.
- **Features**: - **Features**:
- Handles both HTML labels and plain text. - Handles both HTML labels and plain text.
@@ -18,30 +19,35 @@ Before starting with shape creation, it's essential to familiarize yourself with
- Ensures proper positioning of labels within shapes. - Ensures proper positioning of labels within shapes.
### 2. `updateNodeBounds` ### 2. `updateNodeBounds`
- **Purpose**: Updates the bounding box dimensions (width and height) of a node. - **Purpose**: Updates the bounding box dimensions (width and height) of a node.
- **Usage**: - **Usage**:
- Adjusts the size of the node to fit the content or shape. - Adjusts the size of the node to fit the content or shape.
- Useful for ensuring that shapes resize appropriately based on their content. - Useful for ensuring that shapes resize appropriately based on their content.
### 3. `insertPolygonShape` ### 3. `insertPolygonShape`
- **Purpose**: Inserts a polygon shape into an SVG container. - **Purpose**: Inserts a polygon shape into an SVG container.
- **Features**: - **Features**:
- Handles the creation and insertion of complex polygonal shapes. - Handles the creation and insertion of complex polygonal shapes.
- Configures the shape's appearance and positioning within the SVG container. - Configures the shape's appearance and positioning within the SVG container.
### 4. `getNodeClasses` ### 4. `getNodeClasses`
- **Purpose**: Returns the appropriate CSS classes for a node based on its configuration. - **Purpose**: Returns the appropriate CSS classes for a node based on its configuration.
- **Usage**: - **Usage**:
- Dynamically applies CSS classes to nodes for styling purposes. - Dynamically applies CSS classes to nodes for styling purposes.
- Ensures that nodes adhere to the desired design and theme. - Ensures that nodes adhere to the desired design and theme.
### 5. `createPathFromPoints` ### 5. `createPathFromPoints`
- **Purpose**: Generates an SVG path string from an array of points. - **Purpose**: Generates an SVG path string from an array of points.
- **Usage**: - **Usage**:
- Converts a list of points into a smooth path. - Converts a list of points into a smooth path.
- Useful for creating custom shapes or paths within the SVG. - Useful for creating custom shapes or paths within the SVG.
### 6. `generateFullSineWavePoints` ### 6. `generateFullSineWavePoints`
- **Purpose**: Generates points for a sine wave, useful for creating wavy-edged shapes. - **Purpose**: Generates points for a sine wave, useful for creating wavy-edged shapes.
- **Usage**: - **Usage**:
- Facilitates the creation of shapes with wavy or sine-wave edges. - Facilitates the creation of shapes with wavy or sine-wave edges.
@@ -52,7 +58,14 @@ Before starting with shape creation, it's essential to familiarize yourself with
To utilize these utilities, simply import them from the `utils.ts` file into your shape creation script. These helpers will streamline the process of building and customizing SVG shapes, ensuring consistent results across your projects. To utilize these utilities, simply import them from the `utils.ts` file into your shape creation script. These helpers will streamline the process of building and customizing SVG shapes, ensuring consistent results across your projects.
```typescript ```typescript
import { labelHelper, updateNodeBounds, insertPolygonShape, getNodeClasses, createPathFromPoints, generateFullSineWavePoints } from './utils.ts'; import {
labelHelper,
updateNodeBounds,
insertPolygonShape,
getNodeClasses,
createPathFromPoints,
generateFullSineWavePoints,
} from './utils.ts';
``` ```
## Example Usage ## Example Usage
@@ -65,10 +78,10 @@ import { labelHelper, insertPolygonShape } from './utils.ts';
const svgContainer = document.getElementById('svgContainer'); const svgContainer = document.getElementById('svgContainer');
// Insert a polygon shape // Insert a polygon shape
insertPolygonShape(svgContainer, /* shape-specific parameters */); insertPolygonShape(svgContainer /* shape-specific parameters */);
// Create and insert a label inside the shape // Create and insert a label inside the shape
labelHelper(svgContainer, /* label-specific parameters */); labelHelper(svgContainer /* label-specific parameters */);
``` ```
## Adding New Shapes ## Adding New Shapes
@@ -80,6 +93,7 @@ To add a new shape:
- **Create the shape function**: Create a new file of name of the shape and export a function in the `shapes` directory that generates your shape. The file and function should follow the pattern used in existing shapes and return an SVG element. - **Create the shape function**: Create a new file of name of the shape and export a function in the `shapes` directory that generates your shape. The file and function should follow the pattern used in existing shapes and return an SVG element.
- **Example**: - **Example**:
```typescript ```typescript
import { Node } from '$root/rendering-util/types.d.ts'; import { Node } from '$root/rendering-util/types.d.ts';
@@ -96,6 +110,7 @@ To add a new shape:
- **Register the shape**: Add your shape to the `shapes` object in the main shapes module. This allows your shape to be recognized and used within the system. - **Register the shape**: Add your shape to the `shapes` object in the main shapes module. This allows your shape to be recognized and used within the system.
- **Example**: - **Example**:
```typescript ```typescript
import { myNewShape } from './shapes/myNewShape'; import { myNewShape } from './shapes/myNewShape';
@@ -112,14 +127,17 @@ This contains algorithms and utilities for calculating intersection points for v
## Shape Intersection Functions ## Shape Intersection Functions
### 1. `Ellipse` ### 1. `Ellipse`
Calculates the intersection points for an ellipse. Calculates the intersection points for an ellipse.
**Usage**: **Usage**:
```javascript ```javascript
import intersectEllipse from './intersect-ellipse.js'; import intersectEllipse from './intersect-ellipse.js';
const intersection = intersectEllipse(node, rx, ry, point); const intersection = intersectEllipse(node, rx, ry, point);
``` ```
- **Parameters**: - **Parameters**:
- `node`: The SVG node element. - `node`: The SVG node element.
- `rx`: The x-radius of the ellipse. - `rx`: The x-radius of the ellipse.
@@ -127,44 +145,49 @@ const intersection = intersectEllipse(node, rx, ry, point);
- `point`: The point from which the intersection is calculated. - `point`: The point from which the intersection is calculated.
### 2. `intersectRect` ### 2. `intersectRect`
Calculates the intersection points for a rectangle. Calculates the intersection points for a rectangle.
**Usage**: **Usage**:
```javascript ```javascript
import intersectRect from './intersect-rect.js'; import intersectRect from './intersect-rect.js';
const intersection = intersectRect(node, point); const intersection = intersectRect(node, point);
``` ```
- **Parameters**: - **Parameters**:
- `node`: The SVG node element. - `node`: The SVG node element.
- `point`: The point from which the intersection is calculated. - `point`: The point from which the intersection is calculated.
### 3. `intersectPolygon` ### 3. `intersectPolygon`
Calculates the intersection points for a polygon. Calculates the intersection points for a polygon.
**Usage**: **Usage**:
```javascript ```javascript
import intersectPolygon from './intersect-polygon.js'; import intersectPolygon from './intersect-polygon.js';
const intersection = intersectPolygon(node, polyPoints, point); const intersection = intersectPolygon(node, polyPoints, point);
``` ```
- **Parameters**: - **Parameters**:
- `node`: The SVG node element. - `node`: The SVG node element.
- `polyPoints`: Array of points defining the polygon. - `polyPoints`: Array of points defining the polygon.
- `point`: The point from which the intersection is calculated. - `point`: The point from which the intersection is calculated.
## Cypress Tests ## Cypress Tests
To ensure the robustness of the flowchart shapes, there are implementation of comprehensive Cypress test cases in ```newShapes.spec.ts``` file. These tests cover various aspects such as: To ensure the robustness of the flowchart shapes, there are implementation of comprehensive Cypress test cases in `newShapes.spec.ts` file. These tests cover various aspects such as:
- **Shapes**: Testing new shapes like `bowTieRect`, `waveRectangle`, `trapezoidalPentagon`, etc. - **Shapes**: Testing new shapes like `bowTieRect`, `waveRectangle`, `trapezoidalPentagon`, etc.
- **Looks**: Verifying shapes under different visual styles (`classic` and `handDrawn`). - **Looks**: Verifying shapes under different visual styles (`classic` and `handDrawn`).
- **Directions**: Ensuring correct rendering in all flow directions of arrows : - **Directions**: Ensuring correct rendering in all flow directions of arrows :
- `TB` ```(Top -> Bottom)``` - `TB` `(Top -> Bottom)`
- `BT` ```(Bottom -> Top)``` - `BT` `(Bottom -> Top)`
- `LR` ```(Left -> Right)``` - `LR` `(Left -> Right)`
- `RL` ```(Right -> Left)``` - `RL` `(Right -> Left)`
- **Labels**: Testing shapes with different labels, including: - **Labels**: Testing shapes with different labels, including:
- No labels - No labels
- Short labels - Short labels
@@ -180,8 +203,12 @@ To run the Cypress tests, follow these steps:
1. Ensure you have all dependencies installed by running: 1. Ensure you have all dependencies installed by running:
```bash ```bash
npm install npm install
```
2. Start the Cypress test runner: 2. Start the Cypress test runner:
```bash ```bash
cypress open --env updateSnapshots=true cypress open --env updateSnapshots=true
```
3. Select the test suite from the Cypress interface to run all the flowchart shape tests. 3. Select the test suite from the Cypress interface to run all the flowchart shape tests.