Merge pull request #882 from ExtensionEngine/feature/improve-outline-rendering

Improve outline performance

Author: underscope

client/components/repository/Outline/Activity.vue

@@ -1,27 +1,21 @@
 <template>
   <div>
-    <div class="activity-wrapper">
+    <v-hover v-slot="{ hover }" class="activity-wrapper">
       <div
-        @click="selectActivity(id)"
-        @mouseover="isHovered = true"
-        @mouseout="isHovered = false"
+        @mousedown="selectActivity(id)"
         :id="`activity_${uid}`"
-        :style="{ 'border-left-color': color }"
-        :class="{
-          selected: isSelected,
-          highlighted: isHovered || isSelected
-        }"
+        :style="{ 'border-left-color': config.color }"
+        :class="{ selected: isSelected, highlighted: hover }"
         class="activity">
         <v-btn
           v-if="hasSubtypes"
-          @click.stop="toggle()"
+          @mousedown.stop="toggle()"
           icon
           class="my-auto">
           <v-icon size="30" color="primary darken-3">mdi-{{ icon }}</v-icon>
         </v-btn>
         <div class="activity-name h5 my-auto text-truncate">{{ data.name }}</div>
-        <v-spacer />
-        <div v-show="isHighlighted" class="actions my-auto">
+        <div v-if="isSelected || hover" class="actions my-auto">
           <options-toolbar
             :activity="{ id, uid, repositoryId, parentId, type, position, data }"
             class="options-toolbar my-auto" />
@@ -44,7 +38,7 @@
             class="options-menu" />
         </div>
       </div>
-    </div>
+    </v-hover>
     <div v-if="!isCollapsed({ uid }) && hasChildren">
       <draggable
         @update="data => reorder(data, children)"
@@ -63,11 +57,9 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations, mapState } from 'vuex';
+import { mapGetters, mapMutations } from 'vuex';
 import Draggable from 'vuedraggable';
 import filter from 'lodash/filter';
-import find from 'lodash/find';
-import { isEditable } from 'shared/activities';
 import OptionsMenu from '../common/ActivityOptions/Menu';
 import OptionsToolbar from '../common/ActivityOptions/Toolbar';
 import reorderMixin from './reorderMixin';
@@ -90,15 +82,10 @@ export default {
     data: { type: Object, required: true },
     activities: { type: Array, default: () => ([]) }
   },
-  data: () => ({ isHovered: false }),
   computed: {
     ...mapGetters('repository', ['structure', 'isCollapsed']),
-    ...mapState('repository', { outlineState: 'outline' }),
-    config: vm => find(vm.structure, { type: vm.type }),
-    color: vm => vm.config.color,
-    isEditable: vm => isEditable(vm.type),
+    config: vm => vm.structure.find(it => it.type === vm.type),
     isSelected: vm => vm.selectedActivity && (vm.selectedActivity.uid === vm.uid),
-    isHighlighted: vm => vm.isHovered || vm.isSelected,
     isExpanded: vm => !vm.isCollapsed({ uid: vm.uid }),
     hasSubtypes: vm => !!size(vm.config.subLevels),
     hasChildren: vm => (vm.children.length > 0) && vm.hasSubtypes,
@@ -148,7 +135,7 @@ $background-color:  #eceff1;
     line-height: 2.5rem;
   }
 
-  &.highlighted {
+  &.selected, &.highlighted {
     opacity: 1;
     background-color: darken($background-color, 7);