SVG Layout Designer React

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 (in order to clone the documentation)
• dotnet (optional) used for api test

Recommanded tools for developers

• VSCode
• React DevTools
• Typescript React code snippets
• vscode-tailwindcss
• 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.

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 :

{
  // 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.