Optimize the tree view rendering during searches by enhancing the render
queue ordering. This update changes the rendering order to prioritize
visible nodes, leading to faster appearance of these nodes during
searches. The ordering logic now ignores the depth in the hierarchy and
instead focused on the node order. The collapsed check for the node
itself is removed, ensuring that visible collapsed parents are first
while their invisible children are rendered later.
This commit updates various dependencies to their latest versions.
Other changes include:
- Moved the following from `devDependencies` to `dependencies`:
- `electron-log`
- `electron-updater`
- Remove `npm` dependency.
- Code changes:
- Add type casting in several places to align with the latest
`typescript` version.
- Adopt to new return type of `setTimeout`.
- Dependencies not upgraded due to
`@vue/eslint-config-airbnb-with-typescript` not supporting
`@eslint-typescript` V6 (see vuejs/eslint-config-airbnb#58):
- `vue/eslint-config-typescript`
- `@typescript-eslint/eslint-plugin`
- `@typescript-eslint/parser`
- Enable video recording for cypress as it's disabled by default since
13.X.X.
The tree view rendering performance is optimized by improving the node
render queue ordering. The node rendering order is modified based on the
expansion state and the depth in the hierarchy, leading to faster
rendering of visible nodes. This optimization is applied when the tree
nodes are not expanded to improve the rendering speed.
This new ordering ensures that nodes are rendered more efficiently,
prioritizing nodes that are collapsed and are at a higher level in the
hierarchy.
This commit fixes an issue where the check state of categories was lost
when toggling between card and tree views. This is solved by immediately
emitting node state changes for all nodes. This ensures consistent view
transitions without any loss of node state information.
Furthermore, this commit includes added unit tests for the modified code
sections.
Key highlights:
- Written from scratch to cater specifically to privacy.sexy's
needs and requirements.
- The visual look mimics the previous component with minimal changes,
but its internal code is completely rewritten.
- Lays groundwork for future functionalities like the "expand all"
button a flat view mode as discussed in #158.
- Facilitates the transition to Vue 3 by omitting the Vue 2.0 dependent
`liquour-tree` as part of #230.
Improvements and features:
- Caching for quicker node queries.
- Gradual rendering of nodes that introduces a noticable boost in
performance, particularly during search/filtering.
- `TreeView` solely governs the check states of branch nodes.
Changes:
- Keyboard interactions now alter the background color to highlight the
focused item. Previously, it was changing the color of the text.
- Better state management with clear separation of concerns:
- `TreeView` exclusively manages indeterminate states.
- `TreeView` solely governs the check states of branch nodes.
- Introduce transaction pattern to update state in batches to minimize
amount of events handled.
- Improve keyboard focus, style background instead of foreground. Use
hover/touch color on keyboard focus.
- `SelectableTree` has been removed. Instead, `TreeView` is now directly
integrated with `ScriptsTree`.
- `ScriptsTree` has been refactored to incorporate hooks for clearer
code and separation of duties.
- Adopt Vue-idiomatic bindings instead of keeping a reference of the
tree component.
- Simplify and change filter event management.
- Abandon global styles in favor of class-scoped styles.
- Use global mixins with descriptive names to clarify indended
functionality.
