feat(inspector): double click to toggle expand node

Akryum · Akryum · commit 930e42dcb224 · 2022-03-09T10:55:43.000+01:00
diff --git a/packages/app-frontend/src/features/components/ComponentTreeNode.vue b/packages/app-frontend/src/features/components/ComponentTreeNode.vue
@@ -162,7 +162,7 @@ export default defineComponent({
   <div class="min-w-max">
     <div
       ref="toggleEl"
-      class="font-mono cursor-pointer relative z-10 rounded whitespace-nowrap flex items-center pr-2 text-sm selectable-item"
+      class="font-mono cursor-pointer relative z-10 rounded whitespace-nowrap flex items-center pr-2 text-sm select-none selectable-item"
       :class="{
         selected,
         'opacity-50': instance.inactive,
@@ -171,6 +171,7 @@ export default defineComponent({
         paddingLeft: depth * 15 + 4 + 'px'
       }"
       @click="select()"
+      @dblclick="toggle()"
       @mouseover="highlight()"
       @mouseleave="unhighlight()"
     >
diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspectorNode.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspectorNode.vue
@@ -159,14 +159,15 @@ export default defineComponent({
   <div class="min-w-max">
     <div
       ref="toggleEl"
-      class="font-mono cursor-pointer relative z-10 rounded whitespace-nowrap flex items-center pr-2 text-sm selectable-item"
+      class="font-mono cursor-pointer relative z-10 rounded whitespace-nowrap flex items-center pr-2 text-sm select-none selectable-item"
       :class="{
         selected
       }"
       :style="{
         paddingLeft: depth * 15 + 4 + 'px'
       }"
       @click="select()"
+      @dblclick="toggle()"
     >
       <!-- arrow wrapper for better hit box -->
       <span
