docs: add readme
This commit is contained in:
parent
23096cb299
commit
26d41981de
2 changed files with 30 additions and 4 deletions
BIN
README.assets/intro.png
Normal file
BIN
README.assets/intro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
34
README.md
34
README.md
|
|
@ -1,4 +1,4 @@
|
||||||
# roadmap-render
|
# Roadmap Render
|
||||||
|
|
||||||
[![npm version][npm-version-src]][npm-version-href]
|
[![npm version][npm-version-src]][npm-version-href]
|
||||||
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
||||||
|
|
@ -7,11 +7,37 @@
|
||||||
[![License][license-src]][license-href]
|
[![License][license-src]][license-href]
|
||||||
[![javascript_code style][code-style-image]][code-style-url]
|
[![javascript_code style][code-style-image]][code-style-url]
|
||||||
|
|
||||||
_description_
|
This project, `roadmap-render`, is a JavaScript library that enables the conversion of wireframe JSON data into scalable vector graphics (SVG) for rendering roadmaps or visual representations of user interfaces.
|
||||||
|
|
||||||
> **Note**:
|

|
||||||
> Replace `roadmap-render`, `_description_` and `kirklin` globally to use this template.
|
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
### Conversion Utilities
|
||||||
|
- **Decimal Color Conversion:** `decimalToRGB` function to convert decimal color values to their RGB representation.
|
||||||
|
- **SVG Element Creation:** `createSVGElement` function facilitating the creation of SVG elements with attributes.
|
||||||
|
|
||||||
|
### Renderer Class
|
||||||
|
The `Renderer` class acts as the main component responsible for rendering controls based on the provided wireframe data. It includes methods to render various control types like rectangles, text inputs, arrows, icons, horizontal rules, and grouped elements.
|
||||||
|
|
||||||
|
### Control Parsing and Rendering
|
||||||
|
- **Control Parsing:** Functions to parse control properties such as color, font styles, and measurements.
|
||||||
|
- **Rendering Functions:** Methods to render different control types by generating corresponding SVG elements.
|
||||||
|
|
||||||
|
### Wireframe to SVG Conversion
|
||||||
|
- **`wireframeJSONToSVG` Function:** Converts wireframe JSON data into SVG elements using the provided options, including padding, font family, and font URL.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
To use this library:
|
||||||
|
1. Import the necessary functions and classes from the library.
|
||||||
|
2. Call the `wireframeJSONToSVG` function with wireframe data and optional rendering options.
|
||||||
|
3. Integrate the resulting SVG element into your application or user interface.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
To install this library, clone the repository and include the necessary files in your project. Ensure to link this library in your HTML files using script tags.
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
We welcome contributions! Please submit issues or pull requests for any enhancements, bug fixes, or new features.
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue