feat: alt-click to expand all sub-nodes

Author: konpeki622

packages/app-frontend/src/features/components/ComponentTreeNode.vue

@@ -41,6 +41,7 @@ export default defineComponent({
       isExpandedUndefined,
       isComponentOpen,
       toggleExpand: toggle,
+      forceToggleExpandAll: forceToggleAll,
       subscribeToComponentTree,
     } = useComponent(instance)
 
@@ -149,6 +150,7 @@ export default defineComponent({
       select,
       expanded,
       toggle,
+      forceToggleAll,
       highlight,
       unhighlight,
       selectNextSibling,
@@ -180,7 +182,8 @@ export default defineComponent({
         :class="{
           'invisible': !instance.hasChildren
         }"
-        @click.stop="toggle()"
+        @click.exact.stop="toggle()"
+        @click.alt.exact.stop="forceToggleAll(instance, !expanded)"
       >
         <span
           :class="{

packages/app-frontend/src/features/components/composable/components.ts

@@ -144,6 +144,17 @@ export function useComponent (instance: Ref<ComponentTreeNode>) {
     }
   }
 
+  function forceToggleExpandAll (instance, isOpen) {
+    if (!instance.hasChildren) return
+    setComponentOpen(instance.id, isOpen)
+    if (isComponentOpen(instance.id)) {
+      requestComponentTree(instance.id)
+    }
+    instance.children.forEach(child => {
+      forceToggleExpandAll(child, isOpen)
+    })
+  }
+
   const isSelected = computed(() => selectedComponentId.value === instance.value.id)
 
   function select (id = instance.value.id) {
@@ -179,6 +190,7 @@ export function useComponent (instance: Ref<ComponentTreeNode>) {
     isExpandedUndefined,
     isComponentOpen,
     toggleExpand,
+    forceToggleExpandAll,
     isSelected,
     select,
     subscribeToComponentTree,