# SVG Layout Designer React

[![Build Status](https://dev.azure.com/enguyen0660/SVGLayoutDesignerReact/_apis/build/status/SVGLayoutDesignerReact?branchName=dev)](https://dev.azure.com/enguyen0660/SVGLayoutDesignerReact/_build/latest?definitionId=4&branchName=dev)

An svg layout designer.


# Getting Started

Requirements :
- `node` >= 16.x (>= 17.x to run vitest tests)
- `npm`
- pnpm (optional) reduce `node_modules` folder size by using symlinks
- [`git-lfs`](https://git-lfs.github.com/) (in order to clone the documentation)
- `dotnet` (optional) used for api test


# Recommanded tools for developers

- [VSCode](https://code.visualstudio.com/)
- [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
- [Typescript React code snippets](https://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescript)
- [vscode-tailwindcss](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
- [vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)


# Develop

Run `npm i`

Run `npm run dev`


# Deploy

Run `npm i`

Run `npm run build`


# Run the tests

Run `npm i`

Run `npm test`

Or run `npm test:full` to also test the C# API


# API

You can preload a state by setting the `state` URL parameter
with a url address to a `state.json` file.

Example: `http://localhost:4000/?state=http://localhost:5000/state.json`


# Testing the external API

This program fetch the data structure from others applications, allowing it to assemble them later.

```bash
node run ./test-server/http.js
```

The web server will be running at `http://localhost:5000`

Copy `.env.development` to the file `.env.development.local`
and change the url to whatever you want to use.


# Setup debugging with chrome

Inside `.vscode/settings.json`, set the following :

```json
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}",
    }
  ]
}
```

Change the `url` to the dev server url. Set the `runtimeExecutable` to your favorite chromium browser.


# Generate definition files for SmartModeler

Prerequisites: `typescript`, `python3`

Go to the `src/dts` directory and run the following command

```
npx tsc --project tsconfig.dts.json
```

Or if installed globally

```
tsc --project tsconfig.dts.json
```


Then, run `python3` (or `py` on Windows) on `generate_dts.py`:

```
python3 generate_dts.py SVGLD svgld.d.ts
```

A definition will be generated as `svgld.d.ts` with the namespace `SVGLD`.