Performance optimization: Removed creature document from injection to prevent uneccessary Vue re-rendering

2021-02-11 10:04:28 +02:00
parent 565ddccba6
commit 74370f6fec
16 changed files with 27 additions and 46 deletions
--- 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>
--- 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': {
--- 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,
--- 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,
--- 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>

--- 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){
--- 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,
--- 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"
--- 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,
--- 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,
 		},
--- 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;
--- 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"
--- 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"
--- 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,
--- 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
--- 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,