feat: alt-click to expand all sub-nodes

Author: konpeki622

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

@@ -140,6 +140,14 @@ export default defineComponent({
       }
     }
 
+    function switchToggle (event) {
+      if (event.altKey) {
+        toggle(true, !expanded.value)
+      } else {
+        toggle()
+      }
+    }
+
     return {
       toggleEl,
       sortedChildren,
@@ -148,7 +156,7 @@ export default defineComponent({
       selected,
       select,
       expanded,
-      toggle,
+      switchToggle,
       highlight,
       unhighlight,
       selectNextSibling,
@@ -180,7 +188,7 @@ export default defineComponent({
         :class="{
           'invisible': !instance.hasChildren
         }"
-        @click.stop="toggle()"
+        @click.stop="switchToggle"
       >
         <span
           :class="{

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

@@ -136,11 +136,18 @@ export function useComponent (instance: Ref<ComponentTreeNode>) {
   const isExpanded = computed(() => isComponentOpen(instance.value.id))
   const isExpandedUndefined = computed(() => expandedMap.value[instance.value.id] == null)
 
-  function toggleExpand () {
-    if (!instance.value.hasChildren) return
-    setComponentOpen(instance.value.id, !isExpanded.value)
-    if (isComponentOpen(instance.value.id)) {
-      requestComponentTree(instance.value.id)
+  function toggleExpand (recursively = false, value?, child?) {
+    const treeNode = child || instance.value
+    if (!treeNode.hasChildren) return
+    const isOpen = value === undefined ? !isExpanded.value : value
+    setComponentOpen(treeNode.id, isOpen)
+    if (isComponentOpen(treeNode.id)) {
+      requestComponentTree(treeNode.id)
+    }
+    if (recursively) {
+      treeNode.children.forEach(child => {
+        toggleExpand(recursively, value, child)
+      })
     }
   }