FTVT

A soccer tactics visualisation tool

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:9080
npm run dev

# build electron application for production
npm run build


# lint all JS/Vue component files in `src/`
npm run lint

---

This project was generated with electron-vue@331f85f using vue-cli. Documentation about the original structure can be found here.

Project Overview

Dependencies

• Application Framework: Electron
• Component Framework: Vue.js
• Components: Vuetify.js
• Canvas & Layer handling: Konva.js

Structure

The project consists of custom vue-components and custom ES6 classes all situated in the /src/renderer/components folder.

The window layout consists of 4 main components:

• ApplicationBar
• ToolBar
• HierarchyView (should be renamed PropertyView I know...)
• DocumentView

Communication between components is handled via a dedicated Vue instance which is only used as a message bus. This instance is imported from helpers/EventBus.js.

Classes in the objects folder are not responsible for displaying anything themselves. They are descendants of Konva.js Objects and used on the canvas for drawing by Konva. Those objects represent everything that can be drawn by this application.

Drawing is handled in the DocumentView. Manipulations from HierarchyView or Toolbar are passed using the before mentioned EventBus.