126 lines
No EOL
3.4 KiB
Markdown
126 lines
No EOL
3.4 KiB
Markdown
# SVG Layout Designer React
|
|
|
|
[](https://drone.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react)
|
|
|
|
[](https://drone.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react)
|
|
|
|
[](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
|
|
|
|
# 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)
|
|
- [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)
|
|
|
|
# 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
|
|
|
|
Pre-requisite: `typescript`, `python3`
|
|
|
|
Go to the `src/dts` directory and run the following command
|
|
|
|
```
|
|
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`. |