🎉 Added feature for renaming items.

Author: geekhybrid

README.md

@@ -5,19 +5,16 @@ A light-weight library for management of hierachical content. Most solutions I f
 ## What it does.
 
 1. :heavy_check_mark: Hierachical rendering of content.
-2. Event publishing/subscription from items
-    - ✔️ Subscribing to items checked event (based on type)
+2. ✔️ Subscribing to items checked event (based on type)
 3. :heavy_check_mark: Moving Items between folders (drag-and-drop)
-4. Custom formating of items on the tree based on the `type` property.
-      - :heavy_check_mark: Customising Icons
-      - ✔️ Rendering (checkboxes or plain content)
-
-5. Programmatically toggle item visibility based on the `type` property.
-6. Sorting items alphametically or grouping based on types
-7. Disabling and Enabling Item
-8. Double clicking to rename item
-9. Programmatically determining what item can be dragged into another item.
-10. Custom Context Menu depending on item type.
+4. :heavy_check_mark: Customising Item Rendering based on item type
+5. ✔️ Rendering selectable items like checkboxes or plain content
+6. Programmatically toggle item visibility based on the `type` property.
+7. Sorting items alphametically or grouping based on types
+8. Disabling and Enabling Item
+9. Double clicking to rename item
+10. Programmatically determining what item can be dragged into another item.
+11. Custom Context Menu depending on item type.
 
 ## What it looks like.
 
@@ -197,7 +194,7 @@ export default class App extends Vue {
 Out-of-the-box, `v-tree-vue` ships with default behaviors like double clicking an item to rename, pushing the `DEL` key to delete and moving (drag-and-drop) items into new locations. However, this is totally customisable. The default command API exposes the following configurations:
 
 ```ts
-export interface DefaultBehaviors {
+export interface ItemBehavior {
     // Allow customisation of items that can be renamed on the tree.
     enableRenaming(type: string): void;
     // Allow customisation of items that can be deleted on the tree.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-tree-vue",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "ISC",
   "repository": {
     "type": "git",
@@ -17,7 +17,9 @@
     "TreeView",
     "Hierachical",
     "Recursive",
-    "Tree"
+    "Tree",
+    "Typescript",
+    "Flexible TreeView"
   ],
   "author": "Enyi Francis Hocaha",
   "dependencies": {
@@ -50,10 +52,5 @@
     "sass-loader": "^8.0.2",
     "typescript": "~4.1.5",
     "vue-template-compiler": "^2.6.11"
-  },
-  "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/geekhybrid/tree-vue.git"
   }
 }

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="display: flex">
     <!-- Example of how to customise appearance of tree items -->
-    <tree-view :treeViewItems="treeViewNodes" @created="customiseTreeView" :hideGuideLines="true">
+    <tree-view :treeViewItems="treeViewNodes" @created="customiseTreeView" >
         <template v-slot:icon="treeViewItem">
             <img src="@/assets/folder.svg" alt="folder" v-if="treeViewItem.type === 'folder'" >
             <img src="@/assets/word.svg" alt="vue-logo" v-else-if="treeViewItem.type === '.doc'" height="18" width="18">
@@ -25,14 +25,22 @@ export default class App extends Vue {
 
   customiseTreeView(treeCreatedEvent: TreeViewCreatedEventPayload): void {
     const customisations = treeCreatedEvent.itemCustomisations;
+    
+    const folderRenameHandler = (folderItem: TreeViewItem) => new Promise<TreeViewItem>((accept) => {
+      console.log(folderItem);
+    });
+
+    customisations.registerDragAndDropValidator(() => true);
+    customisations.registerItemRenamedHandler('folder', folderRenameHandler);
+    
     customisations.makeItemsCheckable([".doc", ".excel", "media" ]);
   }
 
   // customiseSchools(treeCreatedEvent: TreeViewCreatedEventPayload): void {
   //   const customisations = treeCreatedEvent.itemCustomisations;
   //   const eventManager = treeCreatedEvent.eventManager;
 
-  //   eventManager.subscribeToItemChecked("department", (items) => console.log(items));
+  //   eventManager.subscribeToItemChecked("department", (items) =>   g(items));
   //   customisations.makeItemsCheckable(["department"]);
   // }
 

src/businessLogic/contracts/types.ts

@@ -8,24 +8,34 @@ export interface TreeViewItem {
 }
 
 export interface ItemTypeCustomisations {
+    isDropValid(droppedNode: TreeViewItem, dropHost: TreeViewItem): boolean;
     makeItemsCheckable(types: string[]): void;
-    typeCustomisations(): {[type: string]: Customisations };
-}
-
-export interface DefaultBehaviors {
-    // Allow customisation of items that can be renamed on the tree.
-    enableRenaming(type: string): void;
-    // Allow customisation of items that can be deleted on the tree.
-    enableDeleting(type: string): void;
-    // Allow registration of handler to be called when an item of a particular type has been deleted.
-    registerItemDeletedHandler(type: string, callback: (item: TreeViewItem) => Promise<TreeViewItem>): void;
-    // Allow registration of a handler to be called when an item of a particular type has been renamed.
+    registerItemDeletedHandler(type: string, callback: (item: TreeViewItem) => Promise<boolean>): void;
     registerItemRenamedHandler(type: string, callback: (renamedItem: TreeViewItem) => Promise<TreeViewItem>): void;
-    // Allow registration of a handler to be called to verify if a drag-and-drop move operation is valid.
-    registerItemCanMoveHandler(canItemMoveCallBack: (movingItem: TreeViewItem, destinationItem: TreeViewItem) => Promise<boolean>): void;
-    // Allow registration of a handler to be called when a move operation is succesful. The moved item property will contain
-    // the information of the parentID of it's new parent or undefined if it was moved to the root directory.
+    registerDragAndDropValidator(canItemMoveCallBack: (movingItem: TreeViewItem, destinationItem: TreeViewItem) => boolean): void;
     registerItemMovedHandler(callBack: (movedItem: TreeViewItem) => Promise<TreeViewItem>): void;
+    
+    registerAnyItemDeleted(callback: (item: TreeViewItem) => Promise<boolean>): void;
+    registerAnyItemRenamed(callback: (item: TreeViewItem) => Promise<TreeViewItem>): void;
+    registerAnyItemDragAndDrop(): void;
+    
+    disableDragAndDrop(): void;
+    getCustomisation(type: string): Customisations;
+    getRenameHandler(type: string): (item: TreeViewItem) => Promise<TreeViewItem>;
+}
+
+export interface Customisations {
+    canRename?: boolean;
+    isCheckable?: boolean;
+}
+
+export interface EditableItem {
+    begin(): void;
+    end(): void;
+}
+
+export interface RenameItemStartedEventArgs {
+    item: EditableItem;
 }
 
 export interface TreeViewCreatedEventPayload {
@@ -59,10 +69,6 @@ export interface TreeViewViewModel  {
     readonly selectedItems: TreeViewItem[];
 }
 
-export interface Customisations {
-    isCheckable?: boolean;
-}
-
 export interface ItemCheckedChangedEvent {
     item: TreeViewItem,
     status: CheckedState

src/businessLogic/itemCustomisations/itemCustomisations.spec.ts

@@ -7,9 +7,8 @@ describe("ItemCustomisation", () => {
         const expectedTypes = [".docs", ".excel"];
         customisations.makeItemsCheckable(expectedTypes);
 
-        const customisedTypes = customisations.typeCustomisations();
-        expectedTypes.forEach(type => {
-            expect(customisedTypes[type].isCheckable).toBe(true);
-        })
+        [".docs", ".excel"].forEach(type => {
+            expect(customisations.getCustomisation(type).isCheckable).toBe(true);
+        });
     });
 });

src/businessLogic/itemCustomisations/itemCustomisations.ts

@@ -1,6 +1,12 @@
-import { Customisations, ItemTypeCustomisations } from "../contracts/types";
+import { ANY_TYPE } from "@/constants";
+import { Customisations, ItemTypeCustomisations, TreeViewItem } from "../contracts/types";
 
 const typeCustomisations: {[type: string]: Customisations } = {};
+let canItemDrop: (movingItem: TreeViewItem, destinationItem: TreeViewItem) => boolean;
+let isAllowAnyDrop = true;
+
+let renameHandlers: {[type: string] : (item: TreeViewItem) => Promise<TreeViewItem> } = {}
+let deleteHandlers: {[type: string] : (item: TreeViewItem) => Promise<boolean> } = {}
 
 export const ItemCustomisations: ItemTypeCustomisations = {
     makeItemsCheckable(types: string[]): void {
@@ -12,7 +18,62 @@ export const ItemCustomisations: ItemTypeCustomisations = {
         });
     },
 
-    typeCustomisations(): {[type: string]: Customisations } {
-        return typeCustomisations;
+    registerDragAndDropValidator(canItemMoveCallBack: (movingItem: TreeViewItem, destinationItem: TreeViewItem) => boolean): void {
+        isAllowAnyDrop = false;
+        canItemDrop = canItemMoveCallBack;
+    },
+
+    registerItemDeletedHandler(type: string, callback: (item: TreeViewItem) => Promise<boolean>): void  {
+        deleteHandlers[type] = callback;
+    },
+
+    registerItemRenamedHandler(type: string, callback: (renamedItem: TreeViewItem) => Promise<TreeViewItem>): void {
+        renameHandlers[type] = callback;
+        if (typeCustomisations[type])
+        {
+            typeCustomisations[type]
+        }
+        else 
+        {
+            typeCustomisations[type] = {
+                canRename: true
+            }
+        }
+    },
+
+    registerItemMovedHandler(callBack: (movedItem: TreeViewItem) => Promise<TreeViewItem>): void {
+        console.log(callBack);
+    },
+
+    registerAnyItemDeleted(callback: (item: TreeViewItem) => Promise<boolean>): void {
+        deleteHandlers = {};
+        deleteHandlers[ANY_TYPE] = callback;
+    },
+
+    registerAnyItemRenamed(callback: (item: TreeViewItem) => Promise<TreeViewItem>): void {
+        renameHandlers = {};
+        renameHandlers[ANY_TYPE] = callback;
+    },
+
+    registerAnyItemDragAndDrop(): void {
+        isAllowAnyDrop = true;
+        canItemDrop = () => true;
+    },
+
+    isDropValid(droppedNode: TreeViewItem, dropHost: TreeViewItem): boolean {
+        return canItemDrop(droppedNode, dropHost);
+    },
+
+    disableDragAndDrop(): void {
+        isAllowAnyDrop = false;
+        canItemDrop = () => false;
+    },
+
+    getCustomisation(type: string): Customisations {
+        return typeCustomisations[type];
+    },
+
+    getRenameHandler(type: string): (item: TreeViewItem) => Promise<TreeViewItem> {
+        return renameHandlers[type];
     }
 }

src/components/treeView.vue/treeView.vue

@@ -18,7 +18,7 @@
                     </slot>
                 </div>
                 <treeview-item :item="treeViewItem" :treeViewModel="viewModel" @changed="updateItemCheckedStatus"
-                               :customisations="getItemCustomisation(treeViewItem.type)" />
+                               :customisations="itemCustomisations" />
             </div>
 
             <div class="node-child hide" :class="{'hide-guidelines': hideGuideLines}">
@@ -36,7 +36,13 @@
 <script lang='ts'>
 import {Vue, Component, Prop, Watch} from 'vue-property-decorator';
 import { TreeViewModel } from '@/businessLogic/treviewViewModel/treeViewViewModel'
-import { CheckedState, Customisations, ItemCheckedChangedEvent, SelectionMode, TreeViewCreatedEventPayload, TreeViewItem } from '@/businessLogic/contracts/types';
+import { 
+    CheckedState,
+    ItemCheckedChangedEvent, 
+    SelectionMode,
+    TreeViewCreatedEventPayload,
+    TreeViewItem 
+} from '@/businessLogic/contracts/types';
 import { ItemCustomisations } from "@/businessLogic/itemCustomisations/itemCustomisations";
 import { eventManager } from '@/businessLogic/eventHub/explorerEventPublisher';
 
@@ -58,10 +64,6 @@ export default class TreeView extends Vue {
         this.$emit("created", payload);
     }
 
-    getItemCustomisation(type: string): Customisations {
-        return this.itemCustomisations.typeCustomisations()[type];
-    }
-
     updateItemCheckedStatus(checkedEvent: ItemCheckedChangedEvent): void {
         const { item, status } = checkedEvent;
         item.checkedStatus = status;
@@ -94,20 +96,20 @@ export default class TreeView extends Vue {
         }
     }
 
-    onDropNode(node: TreeViewItem, event: DragEvent): void {
+    onDropNode(dropHost: TreeViewItem, event: DragEvent): void {
         if (event.dataTransfer) {
             const droppedNode = JSON.parse(event.dataTransfer.getData('text/plain')) as TreeViewItem;
 
             this.removeHoverClass(event)
 
-            if (droppedNode.id === node.id) {
+            if (droppedNode.id === dropHost.id) {
                 return
             }
-
+            
+            if (!ItemCustomisations.isDropValid(droppedNode, dropHost)) return;
+                
             this.viewModel.removeTreeViewItem(droppedNode.id);
-
-            droppedNode.parentId = node.id;
-
+            droppedNode.parentId = dropHost.id;
             this.viewModel.addTreeViewItem(droppedNode);
         }
     }