Week 8 - Working on the library
This week was focused on continuing the development on the new design and improving the library interface.
Changes to the design
After more feedback from my mentors, we ended up changing the approach of how the user library will work compared to the previously defined method of having a dedicated folder for them.
New user library
Now the user library will consist of all trees or subtrees found in other of the user projects.
The subtrees will appear in the list with the next naming scheme:
<Project name>: <Subtree Name>
This design removes the need to have a specific button for saving the subtree to the library and also reduces the space consumed as now there is no need to store them in a separate directory.
For now the import approach for the user library will be to copy the tree and actions files from their project to the current one. An approach that we could take a look in the future would be to link the instead of copying, but this will increase the complexity by a lot.
Improved design of the Import modal
I have been working on implementing the subtree preview on the library list. This was a major problem because of the complexety of the package use for drawing the subtree diagrams (react-diagrams), because for this preview we want the diagram to be zoom perfectly and be static, so we cannot allow movement or zooming inside the diagram.
For restricting all movement other than zooming I had to dig in the source code to find a possible way of doing it, and after a lot of attempts I solved it with the following lines:
const state: any = engine.current.getStateMachine().getCurrentState();
state.dragCanvas.config.allowDrag = false;
For the zoom part it is still under development, because after fixing the above the zoom restriction was removed. Another issue is after doing the auto zoom to fit all of the diagram inside the list component there are some visual glitches.
So after all of this the current modal looks like this
