Due to the rushed development time of this project, there's no well commentary explain what this code is doing in many places. This additional article serves as a patch, to help those who are willing to do further development to understand the logic of this project.
The virtual directory structure is a tree structure which is generated by generate.py after who scanning the file directories. Every time the /desktop route is triggered, it will be requested first before the DOM is rendered. It is managed by a global state by vuex ({{$store.state.filemap}}). Basically, it will stay unchanged after each opening in our requirements, although by design it can be modified.
Most of the operations are done by traversal in this project, this is obviously unfriendly to efficiency, due to the fact that when the tree structure was originally designed, it is designed according to the return value of the back-end, without taking into account the further control needs of the front-end. But the good news is that GUIs don't usually take up huge computing resources, and the JS engine is fast enough at small data volumes (where small may refer to tens of thousands, much higher than what is possible with daily use).
Most of the left-click operations in the screen are left to the global status manager but not internally digested in the component itself. This is because most clicks are accompanied by the concerted action of numbers of components. The global manager usually needs to handle the following parts of logic:
- About the logic of the component itself, such as minimizing, or closing this window. This relates to our virtual-virtual-dom object management.
- Handling global window sorting, in order of click, a queue should be maintained to ensure which are on top or below.
- Dealing with focus issues, windows selected most recently by left click should be clearly highlighted, while other windows, icons, etc. should be clearly blur.
- Dealing with the right-click context menu, it has some logic of its own, generally speaking context menus will always disappear when you tap on a different location.
The window's own resize & move event is managed by itself, as they usually do not conflict with any other logic.
The exception is that the window's closing animation is handled by itself, which is a design fault that it was not initially considered as the closing event could come from outside the window itself.
All above are pretty much the entire logic. Since we're not writting a real GUI, most of the logic stays simple. Hope this project reduces your workload if you want to do similar development. Basically if you just want to add your own window based on this framework, then the only thing you need do is to create new WindowChildren component and design its trigger button. And if you wish to change the entire theme, you basically need to redesign the taskbar components (including some buttons and some window styles), after all the desktop background is always easy to change.
Thanks for watching.