Visual Library

The project is currently set up with TypeScript, and is built with Webpack to bundle all files needed to run the application in the /dist directory. VSCode is a popular free IDE with excellent TypeScript support.

Building and running the application

This requires you to have NodeJS and a package manager such as Yarn installed. Then run the following commands to get started:

1. Run yarn install to install or update all necessary dependencies.
2. Run yarn dev to build the project files to the /build directory. This will keep running to immediately build changed files when they are updated.
3. In a second terminal, run yarn start to start the application. Refresh the window after modifying a file to load the updated build files.

Releasing

An executable file can be generated with yarn package for your platform. These are put into the /dist directory into the respective platform folder. Otherwise builds are published to Github Releases by creating a git tag prefixed with a v, e.g. v1.0.0.

Getting started

Overview

Electron launches the main process, which sets up a window and launches the renderer process. The renderer process is seprated in a backend and frontend.

• The backend has access to the database, and provides functions for the frontend to interact with it (like endpoints in an API).
• The frontend fetches data from the backend based on the actions of the user, and stores this in the application state.

More detailed information can be found in the documentation of individual files and in the readme files of subfolders.

IDE Setup

Linting has been configured with TSLint so that the code style stays consistent (indenting, variable names, use of parentheses, etc). If you install it as an extension in your IDE, it'll warn you about problems and can automatically fix them in most cases. This works pretty smoothly in VSCode, but probably also in other ones.

Libraries and frameworks

Testing

Testing has been configured with Jest. The convention for unit test files is to add them to the same directory as the file you are testing as [filename].test.ts. A short introduction to Jest with Typescript and React can be found here. The official docs include a more in-depth guide.

Tests can be run using yarn test or debugged in VSCode using the launch configs in .vscode/launch.json, which can run either all tests or just the test file that is open. Jest also offers some useful options, such as running yarn test Backend which will only run the test files with Backend in their filename.

Styling

All styles are defined using SASS. There are two locations where styles are defined:

1. The application style sheets /resources/style: for the layout of panels, global styles, color definitions, etc.
2. The component style sheets /components/*/*.scss: the appearance of buttons, flyouts,

For the application style sheets, there is a file per main panel (toolbar, outliner, content, inspector, etc.) and a couple of files for variable definitions and global styles. To ensure consistent colors are used across the entire application, all of the necessary colors are defined in the colors.scss file. These are then used in the themes.scss file for themes-specific colors (background, font, etc.). The global.scss file contains the root element style, layout definitions and some misc styles like the handlebars.