From 74370f6fece528dcbfc1ce72a3e0c664af0f8b04 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 11 Feb 2021 10:04:28 +0200
Subject: [PATCH] Performance optimization: Removed creature document from
 injection to prevent uneccessary Vue re-rendering

---
 app/imports/ui/creature/character/CharacterSheet.vue  |  5 +----
 .../character/characterSheetTabs/InventoryTab.vue     | 11 ++++++-----
 .../character/characterSheetTabs/SpellsTab.vue        |  3 ---
 .../creatureProperties/CreaturePropertyDialog.vue     |  7 +++++--
 app/imports/ui/creature/slots/SlotDetailsDialog.vue   |  7 +------
 app/imports/ui/creature/slots/SlotFillDialog.vue      |  2 +-
 app/imports/ui/creature/slots/Slots.vue               |  3 ---
 .../components/actions/ItemConsumedView.vue           |  4 ++--
 .../ui/properties/components/attributes/HealthBar.vue |  3 ---
 .../components/attributes/HealthBarCard.vue           |  3 ---
 .../components/attributes/SpellSlotListTile.vue       |  3 ---
 .../properties/components/inventory/ItemListTile.vue  |  2 +-
 app/imports/ui/properties/viewers/ActionViewer.vue    |  6 +++---
 app/imports/ui/properties/viewers/AttributeViewer.vue |  6 +++---
 app/imports/ui/properties/viewers/ItemViewer.vue      |  2 +-
 app/imports/ui/properties/viewers/SkillViewer.vue     |  6 +++---
 16 files changed, 27 insertions(+), 46 deletions(-)

diff --git a/app/imports/ui/creature/character/CharacterSheet.vue b/app/imports/ui/creature/character/CharacterSheet.vue
index 472ca2d8..e276e0ff 100644
--- a/app/imports/ui/creature/character/CharacterSheet.vue
+++ b/app/imports/ui/creature/character/CharacterSheet.vue
@@ -95,7 +95,7 @@
 		},
     reactiveProvide: {
       name: 'context',
-      include: ['creature', 'editPermission'],
+      include: ['creatureId', 'editPermission'],
     },
     computed: {
       activeTab: {
@@ -150,9 +150,6 @@
           return false;
         }
       },
-      snackbars(){
-
-      }
 		},
 	}
 </script>
diff --git a/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue b/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
index f54a3346..ca408675 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
@@ -3,7 +3,7 @@
     <column-layout wide-columns>
       <div>
         <toolbar-card
-          :color="context.creature.color"
+          :color="creature.color"
         >
           <v-toolbar-title slot="toolbar">
             Equipped
@@ -19,7 +19,7 @@
       </div>
       <div>
         <toolbar-card
-          :color="context.creature.color"
+          :color="creature.color"
         >
           <v-toolbar-title slot="toolbar">
             Carried
@@ -46,6 +46,7 @@
 
 <script>
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
+import Creatures from '/imports/api/creature/Creatures.js';
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import ContainerCard from '/imports/ui/properties/components/inventory/ContainerCard.vue';
 import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
@@ -60,9 +61,6 @@ export default {
     ToolbarCard,
     ItemList,
 	},
-  inject: {
-    context: { default: {} }
-  },
 	props: {
 		creatureId: {
       type: String,
@@ -83,6 +81,9 @@ export default {
 				sort: {order: 1},
 			});
 		},
+    creature(){
+      return Creatures.findOne(this.creatureId, {fields: {color: 1}});
+    },
 		containersWithoutAncestorContainers(){
 			return CreatureProperties.find({
 				'ancestors.id': {
diff --git a/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue b/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue
index 4cff71b5..a1264a59 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue
@@ -34,9 +34,6 @@ export default {
     SpellList,
 		SpellListCard,
 	},
-  inject: {
-    context: { default: {} }
-  },
 	props: {
 		creatureId: {
       type: String,
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
index 9dc17409..2e229001 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
@@ -129,11 +129,14 @@ export default {
       );
       if (!nearestCreatureAncestor) return;
       return Creatures.findOne(nearestCreatureAncestor.id);
-    }
+    },
+    creatureId(){
+      return this.creature && this.creature._id;
+    },
   },
   reactiveProvide: {
     name: 'context',
-    include: ['creature', 'editPermission'],
+    include: ['creatureId', 'editPermission'],
   },
   methods: {
     getPropertyName,
diff --git a/app/imports/ui/creature/slots/SlotDetailsDialog.vue b/app/imports/ui/creature/slots/SlotDetailsDialog.vue
index 88942a21..64da098a 100644
--- a/app/imports/ui/creature/slots/SlotDetailsDialog.vue
+++ b/app/imports/ui/creature/slots/SlotDetailsDialog.vue
@@ -28,13 +28,8 @@ export default {
   },
   reactiveProvide: {
     name: 'context',
-    include: ['creature'],
+    include: ['creatureId'],
   },
-  meteor: {
-    creature(){
-      return Creatures.findOne(this.creatureId);
-    },
-  }
 }
 </script>
 
diff --git a/app/imports/ui/creature/slots/SlotFillDialog.vue b/app/imports/ui/creature/slots/SlotFillDialog.vue
index a289ada9..5d61153b 100644
--- a/app/imports/ui/creature/slots/SlotFillDialog.vue
+++ b/app/imports/ui/creature/slots/SlotFillDialog.vue
@@ -168,7 +168,7 @@ export default {
   },
   reactiveProvide: {
     name: 'context',
-    include: ['creature'],
+    include: ['creatureId'],
   },
   methods:{
     getTitle(model){
diff --git a/app/imports/ui/creature/slots/Slots.vue b/app/imports/ui/creature/slots/Slots.vue
index b8aa436f..928d1526 100644
--- a/app/imports/ui/creature/slots/Slots.vue
+++ b/app/imports/ui/creature/slots/Slots.vue
@@ -63,9 +63,6 @@ export default {
   components: {
     TreeNodeView,
   },
-  inject: {
-    context: { default: {} }
-  },
   props: {
     creatureId: {
       type: String,
diff --git a/app/imports/ui/properties/components/actions/ItemConsumedView.vue b/app/imports/ui/properties/components/actions/ItemConsumedView.vue
index 6b199198..c0da0e15 100644
--- a/app/imports/ui/properties/components/actions/ItemConsumedView.vue
+++ b/app/imports/ui/properties/components/actions/ItemConsumedView.vue
@@ -6,7 +6,7 @@
     }"
   >
     <v-menu
-      v-if="context.creature"
+      v-if="context.creatureId"
       transition="slide-y-transition"
       lazy
       :disabled="!context.editPermission"
@@ -17,7 +17,7 @@
           style="height: 100%;"
           :class="{
             'error--text': insufficient,
-            'clickable': context.creature && context.editPermission,
+            'clickable': context.creatureId && context.editPermission,
             'left-pad': leftPad,
           }"
           v-on="on"
diff --git a/app/imports/ui/properties/components/attributes/HealthBar.vue b/app/imports/ui/properties/components/attributes/HealthBar.vue
index ae930b21..d08ab73e 100644
--- a/app/imports/ui/properties/components/attributes/HealthBar.vue
+++ b/app/imports/ui/properties/components/attributes/HealthBar.vue
@@ -75,9 +75,6 @@ import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
 	export default {
     components: {
       IncrementMenu
-    },
-    inject: {
-      context: { default: {} }
     },
 		props: {
 			value: Number,
diff --git a/app/imports/ui/properties/components/attributes/HealthBarCard.vue b/app/imports/ui/properties/components/attributes/HealthBarCard.vue
index 5a792eea..eff2a721 100644
--- a/app/imports/ui/properties/components/attributes/HealthBarCard.vue
+++ b/app/imports/ui/properties/components/attributes/HealthBarCard.vue
@@ -17,9 +17,6 @@
 	import HealthBar from '/imports/ui/properties/components/attributes/HealthBar.vue';
 
 	export default {
-    inject: {
-      context: { default: {} }
-    },
 		components: {
 			HealthBar,
 		},
diff --git a/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue b/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue
index 6955de2f..96cc3cfd 100644
--- a/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue
+++ b/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue
@@ -65,9 +65,6 @@ export default {
     dark: Boolean,
     hideCastButton: Boolean,
 	},
-  inject: {
-    context: { default: {} }
-  },
 	computed: {
 		currentValue(){
 			return this.value - this.damage;
diff --git a/app/imports/ui/properties/components/inventory/ItemListTile.vue b/app/imports/ui/properties/components/inventory/ItemListTile.vue
index eb90c662..7d8f9ac0 100644
--- a/app/imports/ui/properties/components/inventory/ItemListTile.vue
+++ b/app/imports/ui/properties/components/inventory/ItemListTile.vue
@@ -17,7 +17,7 @@
     </v-list-tile-content>
     <v-list-tile-action>
       <increment-button
-        v-if="context.creature && model.showIncrement"
+        v-if="context.creatureId && model.showIncrement"
         icon
         flat
         color="primary"
diff --git a/app/imports/ui/properties/viewers/ActionViewer.vue b/app/imports/ui/properties/viewers/ActionViewer.vue
index 1dcd0707..005610e9 100644
--- a/app/imports/ui/properties/viewers/ActionViewer.vue
+++ b/app/imports/ui/properties/viewers/ActionViewer.vue
@@ -15,7 +15,7 @@
     </div>
     <div class="layout row align-center justify-space-around">
       <v-btn
-        v-if="context.creature"
+        v-if="context.creatureId"
         flat
         outline
         style="font-size: 18px;"
@@ -47,7 +47,7 @@
       </div>
       <div v-if="model.uses">
         <span
-          v-if="context.creature"
+          v-if="context.creatureId"
           class="uses mx-2"
         >
           {{ usesLeft }}/{{ model.usesResult }} uses
@@ -65,7 +65,7 @@
           {{ reset }}
         </span>
         <v-btn
-          v-if="context.creature"
+          v-if="context.creatureId"
           outline
           color="primary"
           :disabled="!model.usesUsed || !context.editPermission"
diff --git a/app/imports/ui/properties/viewers/AttributeViewer.vue b/app/imports/ui/properties/viewers/AttributeViewer.vue
index 1fb417ea..21dfdfcc 100644
--- a/app/imports/ui/properties/viewers/AttributeViewer.vue
+++ b/app/imports/ui/properties/viewers/AttributeViewer.vue
@@ -44,7 +44,7 @@
     />
 
     <effect-viewer
-      v-if="context.creature && model.baseValueCalculation"
+      v-if="context.creatureId && model.baseValueCalculation"
       :model="{
         name: 'Base value',
         result: model.baseValue,
@@ -89,8 +89,8 @@
 		},
     meteor: {
       effects(){
-        if (this.context.creature){
-          let creatureId = this.context.creature._id;
+        if (this.context.creatureId){
+          let creatureId = this.context.creatureId;
           return CreatureProperties.find({
             'ancestors.id': creatureId,
             'stats': this.model.variableName,
diff --git a/app/imports/ui/properties/viewers/ItemViewer.vue b/app/imports/ui/properties/viewers/ItemViewer.vue
index e4096503..cf08e964 100644
--- a/app/imports/ui/properties/viewers/ItemViewer.vue
+++ b/app/imports/ui/properties/viewers/ItemViewer.vue
@@ -9,7 +9,7 @@
         {{ model.quantity }}
       </div>
       <increment-button
-        v-if="context.creature && model.showIncrement"
+        v-if="context.creatureId && model.showIncrement"
         icon
         large
         outline
diff --git a/app/imports/ui/properties/viewers/SkillViewer.vue b/app/imports/ui/properties/viewers/SkillViewer.vue
index 380423dc..9db2026d 100644
--- a/app/imports/ui/properties/viewers/SkillViewer.vue
+++ b/app/imports/ui/properties/viewers/SkillViewer.vue
@@ -40,7 +40,7 @@
     />
 
     <effect-viewer
-      v-if="context.creature && model.baseValue"
+      v-if="context.creatureId && model.baseValue"
       :model="{
         name: 'Base value',
         result: model.baseValue,
@@ -96,8 +96,8 @@ export default {
   },
   meteor: {
     effects(){
-      if (this.context.creature){
-        let creatureId = this.context.creature._id;
+      if (this.context.creatureId){
+        let creatureId = this.context.creatureId;
         return CreatureProperties.find({
           'ancestors.id': creatureId,
           stats: this.model.variableName,