mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-09 18:39:41 +02:00
Lint fix
This commit is contained in:
@@ -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
|
||||
|
@@ -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.
|
||||
|
Reference in New Issue
Block a user