This project implements an interactive workspace and real-time interaction with a server using the WebSocket protocol. Project deployed at vercel: Vue Drag & WebSocket
npm installnpm run devnpm run buildnpm run type-checkLint with ESLint
npm run lintFormat with Prettier
npm run formatvue-konva/konva- the library that provides system for handling interactive movement, resizing of blocks. One of the most popular libraries for canvas handling.localstorage- the build-in solution that provides the way to store the data, so it would be restores if browser is closed/updatedvuex- one of the most popular state-management library for Vue
In this section I used an array as the main data structure as it stores the data about list of blocks which user interacts with.
Because Vue renders components based on tree placement, I changed the way simple Konva projects handle zIndex.
Instead, when user selects the block I manually removing this block from an array and place it as the first one.
Because this array is reactive, the DOM is updating too, rendering the block first and making an effect of changing layers.
Also, the transforms are all made by DISCRETE_UNIT(default: 50) in Konva, so each transformation is rounded by that unit.
Setting and getting by key from localstorage is also implemented.
And other algorithms are implemented such as removing, restoring the item from an array.
websocket-ts- provide typescript version of build-in WebSocket- Blockchain WebSocket API - the API used for getting unsubscribed transactions data
vuex- one of the most popular state-management library for Vue
In this section I used only an array as the only data structure as the user need to see only the list of transactions.
In this section I used pushing item to an array and clearing an array as two main algorithms.
Also for navigation between sections I made its own component that uses vue-router library and home section as an entry point.