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:
1. Ensure you have all dependencies installed by running:
```bash
npm install
```
2. Start the Cypress test runner:
```bash

View File

@@ -11,6 +11,7 @@ Before starting with shape creation, it's essential to familiarize yourself with
## Available Utilities
### 1. `labelHelper`
- **Purpose**: This function creates and inserts labels inside SVG shapes.
- **Features**:
- 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.
### 2. `updateNodeBounds`
- **Purpose**: Updates the bounding box dimensions (width and height) of a node.
- **Usage**:
- Adjusts the size of the node to fit the content or shape.
- Useful for ensuring that shapes resize appropriately based on their content.
### 3. `insertPolygonShape`
- **Purpose**: Inserts a polygon shape into an SVG container.
- **Features**:
- Handles the creation and insertion of complex polygonal shapes.
- Configures the shape's appearance and positioning within the SVG container.
### 4. `getNodeClasses`
- **Purpose**: Returns the appropriate CSS classes for a node based on its configuration.
- **Usage**:
- Dynamically applies CSS classes to nodes for styling purposes.
- Ensures that nodes adhere to the desired design and theme.
### 5. `createPathFromPoints`
- **Purpose**: Generates an SVG path string from an array of points.
- **Usage**:
- Converts a list of points into a smooth path.
- Useful for creating custom shapes or paths within the SVG.
### 6. `generateFullSineWavePoints`
- **Purpose**: Generates points for a sine wave, useful for creating wavy-edged shapes.
- **Usage**:
- 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.
```typescript
import { labelHelper, updateNodeBounds, insertPolygonShape, getNodeClasses, createPathFromPoints, generateFullSineWavePoints } from './utils.ts';
import {
labelHelper,
updateNodeBounds,
insertPolygonShape,
getNodeClasses,
createPathFromPoints,
generateFullSineWavePoints,
} from './utils.ts';
```
## Example Usage
@@ -65,10 +78,10 @@ import { labelHelper, insertPolygonShape } from './utils.ts';
const svgContainer = document.getElementById('svgContainer');
// Insert a polygon shape
insertPolygonShape(svgContainer, /* shape-specific parameters */);
insertPolygonShape(svgContainer /* shape-specific parameters */);
// Create and insert a label inside the shape
labelHelper(svgContainer, /* label-specific parameters */);
labelHelper(svgContainer /* label-specific parameters */);
```
## 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.
- **Example**:
```typescript
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.
- **Example**:
```typescript
import { myNewShape } from './shapes/myNewShape';
@@ -112,14 +127,17 @@ This contains algorithms and utilities for calculating intersection points for v
## Shape Intersection Functions
### 1. `Ellipse`
Calculates the intersection points for an ellipse.
**Usage**:
```javascript
import intersectEllipse from './intersect-ellipse.js';
const intersection = intersectEllipse(node, rx, ry, point);
```
- **Parameters**:
- `node`: The SVG node element.
- `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.
### 2. `intersectRect`
Calculates the intersection points for a rectangle.
**Usage**:
```javascript
import intersectRect from './intersect-rect.js';
const intersection = intersectRect(node, point);
```
- **Parameters**:
- `node`: The SVG node element.
- `point`: The point from which the intersection is calculated.
### 3. `intersectPolygon`
Calculates the intersection points for a polygon.
**Usage**:
```javascript
import intersectPolygon from './intersect-polygon.js';
const intersection = intersectPolygon(node, polyPoints, point);
```
- **Parameters**:
- `node`: The SVG node element.
- `polyPoints`: Array of points defining the polygon.
- `point`: The point from which the intersection is calculated.
## 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.
- **Looks**: Verifying shapes under different visual styles (`classic` and `handDrawn`).
- **Directions**: Ensuring correct rendering in all flow directions of arrows :
- `TB` ```(Top -> Bottom)```
- `BT` ```(Bottom -> Top)```
- `LR` ```(Left -> Right)```
- `RL` ```(Right -> Left)```
- **Directions**: Ensuring correct rendering in all flow directions of arrows :
- `TB` `(Top -> Bottom)`
- `BT` `(Bottom -> Top)`
- `LR` `(Left -> Right)`
- `RL` `(Right -> Left)`
- **Labels**: Testing shapes with different labels, including:
- No labels
- Short labels
@@ -180,8 +203,12 @@ To run the Cypress tests, follow these steps:
1. Ensure you have all dependencies installed by running:
```bash
npm install
```
2. Start the Cypress test runner:
```bash
```bash
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.