# SVG Layout Designer React

[![Build Status](https://drone.siklos-chaneru.duckdns.org/api/badges/Siklos/svg-layout-designer-react/status.svg)](https://drone.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react)

[![Build Status](https://drone.siklos-chaneru.duckdns.org/api/badges/Siklos/svg-layout-designer-react/status.svg?ref=refs/heads/dev)](https://drone.siklos-chaneru.duckdns.org/Siklos/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

Requierements :
- NodeJS
- npm
- Chrome > 98
- pnpm (optional but recommanded unless you prefer having a huge `node_modules` directory)
- [`git-lfs`](https://git-lfs.github.com/) (in order to clone the documentation)

# Developping

Run `npm ci`

Run `npm run dev`

# Deploy

Run `npm ci`

Run `npm run build`


# Run the tests

Run `npm ci`

Run `npm test`


# 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.

## With NodeJS

```bash
node run ./test-server/node-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.

## With bun.sh

Install `bun`

Inside `test-server` folder, run :

```bash
bun run 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.

# Recommanded tools

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

# 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.