diff --git a/README.assets/intro.png b/README.assets/intro.png new file mode 100644 index 0000000..afc6f7c Binary files /dev/null and b/README.assets/intro.png differ diff --git a/README.md b/README.md index 1ef7b36..ab57cad 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# roadmap-render +# Roadmap Render [![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] @@ -7,11 +7,37 @@ [![License][license-src]][license-href] [![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. +![image-20240105235921177](README.assets/intro.png) +## 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