diff --git a/app/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js b/app/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js index 0eb82c7a..3c1e3b89 100644 --- a/app/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js +++ b/app/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js @@ -27,13 +27,17 @@ const insertPropertyFromLibraryNode = new ValidatedMethod({ parentRef: { type: RefSchema, }, + order: { + type: Number, + optional: true, + }, }).validator(), mixins: [RateLimiterMixin], rateLimit: { numRequests: 5, timeInterval: 5000, }, - run({nodeId, parentRef}) { + run({nodeId, parentRef, order}) { // get the new ancestry for the properties let {parentDoc, ancestors} = getAncestry({parentRef}); @@ -79,10 +83,14 @@ const insertPropertyFromLibraryNode = new ValidatedMethod({ }); // Order the root node - setDocToLastOrder({ - collection: CreatureProperties, - doc: node, - }); + if (order === undefined){ + setDocToLastOrder({ + collection: CreatureProperties, + doc: node, + }); + } else { + node.order = order; + } // Insert the creature properties CreatureProperties.batchInsert(nodes); diff --git a/app/imports/ui/creature/character/CharacterSheetFab.vue b/app/imports/ui/creature/character/CharacterSheetFab.vue index 2c9d14f2..2e7affdd 100644 --- a/app/imports/ui/creature/character/CharacterSheetFab.vue +++ b/app/imports/ui/creature/character/CharacterSheetFab.vue @@ -36,16 +36,26 @@ :disabled="!editPermission" @click="insertPropertyOfType(type)" /> - + @@ -55,6 +65,54 @@ import insertProperty from '/imports/api/creature/creatureProperties/methods/insertProperty.js'; import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js'; import PROPERTIES from '/imports/constants/PROPERTIES.js'; + import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js'; + + function getParentAndOrderFromSelectedTreeNode(creatureId){ + // find the parent based on the currently selected property + let el = document.querySelector('.tree-tab .tree-node-title.primary--text'); + let selectedComponent = el && el.parentElement.__vue__.$parent; + let parentRef, order; + if (selectedComponent){ + if (selectedComponent.showExpanded){ + parentRef = { + id: selectedComponent.node._id, + collection: 'creatureProperties', + }; + order = getHighestOrder({ + collection: CreatureProperties, + ancestorId: parentRef.id, + }) + 0.5; + } else { + parentRef = selectedComponent.node.parent; + order = selectedComponent.node.order + 0.5; + } + } else { + parentRef = {collection: 'creatures', id: creatureId}; + order = getHighestOrder({ + collection: CreatureProperties, + ancestorId: parentRef.id, + }) + 0.5; + } + return {parentRef, order} + } + + function hideFab(){ + let fab = document.querySelector('.insert-creature-property-fab'); + if (fab) fab.style.opacity = '0'; + return fab; + } + + function revealFab(fab){ + if (!fab) return; + // Bring back the fab with scale up animation + fab.style.transition = 'none'; + fab.style.opacity = ''; + fab.style.transform = 'scale(0)'; + setTimeout(()=> { + fab.style.transform = ''; + fab.style.transition = ''; + }, 400); + } const tabs = [ 'stats', @@ -100,9 +158,7 @@ methods: { insertPropertyOfType(type){ let creatureId = this.creatureId; - // hide the whole fab - let fab = document.querySelector('.insert-creature-property-fab'); - if (fab) fab.style.opacity = '0' + let fab = hideFab(); // Open the dialog to insert the property this.$store.commit('pushDialogStack', { @@ -113,17 +169,7 @@ }, callback(creatureProperty){ if (!creatureProperty) return 'insert-creature-property-fab'; - - // Bring back the fab with scale up animation - if (fab){ - fab.style.transition = 'none'; - fab.style.opacity = ''; - fab.style.transform = 'scale(0)'; - setTimeout(()=> { - fab.style.transform = ''; - fab.style.transition = ''; - }, 400); - } + revealFab(fab); // Insert the property creatureProperty.order = getHighestOrder({ @@ -140,53 +186,18 @@ }, insertTreeProperty(){ let creatureId = this.creatureId; - // hide the whole fab - let fab = document.querySelector('.insert-creature-property-fab'); - if (fab) fab.style.opacity = '0' - + let fab = hideFab(); // Open the dialog to insert the property this.$store.commit('pushDialogStack', { component: 'creature-property-creation-dialog', elementId: 'insert-creature-property-btn', callback(creatureProperty){ if (!creatureProperty) return 'insert-creature-property-fab'; + revealFab(fab); - // Bring back the fab with scale up animation - if (fab){ - fab.style.transition = 'none'; - fab.style.opacity = ''; - fab.style.transform = 'scale(0)'; - setTimeout(()=> { - fab.style.transform = ''; - fab.style.transition = ''; - }, 400); - } - - // find the parent based on the currently selected property - let el = document.querySelector('.tree-node-title.primary--text'); - let selectedComponent = el && el.parentElement.__vue__.$parent; - let parentRef; - if (selectedComponent){ - if (selectedComponent.showExpanded){ - parentRef = { - id: selectedComponent.node._id, - collection: 'creatureProperties', - }; - creatureProperty.order = getHighestOrder({ - collection: CreatureProperties, - ancestorId: parentRef.id, - }) + 0.5; - } else { - parentRef = selectedComponent.node.parent; - creatureProperty.order = selectedComponent.node.order + 0.5; - } - } else { - parentRef = {collection: 'creatures', id: creatureId}; - creatureProperty.order = getHighestOrder({ - collection: CreatureProperties, - ancestorId: parentRef.id, - }) + 0.5; - } + // Get order and parent + let {parentRef, order } = getParentAndOrderFromSelectedTreeNode(creatureId); + creatureProperty.order = order; // Insert the property let id = insertProperty.call({creatureProperty, parentRef}); @@ -194,6 +205,25 @@ } }); }, + propertyFromLibrary(){ + let creatureId = this.creatureId; + let fab = hideFab(); + + this.$store.commit('pushDialogStack', { + component: 'creature-property-from-library-dialog', + elementId: 'insert-creature-property-from-library-btn', + callback(libraryNode){ + if (!libraryNode) return; + revealFab(fab); + + let nodeId = libraryNode._id; + let {parentRef, order } = getParentAndOrderFromSelectedTreeNode(creatureId); + + let id = insertPropertyFromLibraryNode.call({nodeId, parentRef, order}); + return `tree-node-${id}`; + } + }); + }, } } diff --git a/app/imports/ui/creature/character/CharacterSheetToolbar.vue b/app/imports/ui/creature/character/CharacterSheetToolbar.vue index 09a34945..71b9b067 100644 --- a/app/imports/ui/creature/character/CharacterSheetToolbar.vue +++ b/app/imports/ui/creature/character/CharacterSheetToolbar.vue @@ -248,5 +248,6 @@ export default { .character-sheet-fab { bottom: -24px; right: 8px; + margin-left: 16px; } diff --git a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue index cd30224d..cea74c52 100644 --- a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue +++ b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue @@ -57,36 +57,6 @@ - - - - - @@ -94,12 +64,8 @@ import TreeDetailLayout from '/imports/ui/components/TreeDetailLayout.vue'; import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue'; import CreaturePropertyDialog from '/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue'; - import LabeledFab from '/imports/ui/components/LabeledFab.vue'; import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js'; - import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js'; - import insertProperty from '/imports/api/creature/creatureProperties/methods/insertProperty.js'; - import { setDocToLastOrder } from '/imports/api/parenting/order.js'; import { getPropertyName } from '/imports/constants/PROPERTIES.js'; export default { @@ -107,7 +73,6 @@ TreeDetailLayout, CreaturePropertiesTree, CreaturePropertyDialog, - LabeledFab, }, inject: { context: { default: {} } @@ -196,36 +161,6 @@ }); } }, - insertCreatureProperty(){ - let that = this; - this.$store.commit('pushDialogStack', { - component: 'creature-property-creation-dialog', - elementId: 'insert-creature-property-fab', - callback(creatureProperty){ - if (!creatureProperty) return; - creatureProperty.parent = {collection: 'creatures', id: that.creatureId}; - creatureProperty.ancestors = [ {collection: 'creatures', id: that.creatureId}]; - setDocToLastOrder({collection: CreatureProperties, doc: creatureProperty}); - let id = insertProperty.call({creatureProperty}); - return `tree-node-${id}`; - } - }); - }, - propertyFromLibrary(){ - let that = this; - this.$store.commit('pushDialogStack', { - component: 'creature-property-from-library-dialog', - elementId: 'insert-creature-property-fab', - callback(libraryNode){ - if (!libraryNode) return; - let id = insertPropertyFromLibraryNode.call({ - nodeId: libraryNode._id, - parentRef: {collection: 'creatures', id: that.creatureId}, - }); - return `tree-node-${id}`; - } - }); - }, editCreatureProperty(){ this.$store.commit('pushDialogStack', { component: 'creature-property-dialog',