A soccer tactics visualisation tool
# 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.
- Application Framework: Electron
- Component Framework: Vue.js
- Components: Vuetify.js
- Canvas & Layer handling: Konva.js
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.