Merge pull request #758 from wuboy0307/patch-1

add hover mouse event
CirclonGroup · Dec 27, 2019 · 8aba52c · 8aba52c
2 parents 7bb36d9 + 0f04ce0
commit 8aba52c
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 29 deletions.
diff --git a/example/cli/src/app/actions/actions.component.ts b/example/cli/src/app/actions/actions.component.ts
@@ -16,6 +16,14 @@ const actionMapping:IActionMapping = {
       $event.shiftKey
         ? TREE_ACTIONS.TOGGLE_ACTIVE_MULTI(tree, node, $event)
         : TREE_ACTIONS.TOGGLE_ACTIVE(tree, node, $event);
+    },
+    mouseOver: (tree, node, $event) => {
+      $event.preventDefault();
+      console.log(`mouseOver ${node.data.name}`);
+    },
+    mouseOut: (tree, node, $event) => {
+      $event.preventDefault();
+      console.log(`mouseOut ${node.data.name}`);
     }
   },
   keys: {

diff --git a/example/cli/src/app/fulltree/fulltree.component.ts b/example/cli/src/app/fulltree/fulltree.component.ts
@@ -16,6 +16,14 @@ const actionMapping: IActionMapping = {
       $event.shiftKey
         ? TREE_ACTIONS.TOGGLE_ACTIVE_MULTI(tree, node, $event)
         : TREE_ACTIONS.TOGGLE_ACTIVE(tree, node, $event)
+    },
+    mouseOver: (tree, node, $event) => {
+      $event.preventDefault();
+      console.log(`mouseOver ${node.data.name}`);
+    },
+    mouseOut: (tree, node, $event) => {
+      $event.preventDefault();
+      console.log(`mouseOut ${node.data.name}`);
     }
   },
   keys: {

diff --git a/lib/components/tree-node-wrapper.component.ts b/lib/components/tree-node-wrapper.component.ts
@@ -1,38 +1,40 @@
-import { Component, Input, ViewEncapsulation, TemplateRef } from '@angular/core';
+import { Component , Input , ViewEncapsulation , TemplateRef } from '@angular/core';
 import { TreeNode } from '../models/tree-node.model';
 
 @Component({
-  selector: 'tree-node-wrapper',
-  encapsulation: ViewEncapsulation.None,
-  styles: [],
+  selector: 'tree-node-wrapper' ,
+  encapsulation: ViewEncapsulation.None ,
+  styles: [] ,
   template: `
       <div *ngIf="!templates.treeNodeWrapperTemplate" class="node-wrapper" [style.padding-left]="node.getNodePadding()">
-        <tree-node-checkbox *ngIf="node.options.useCheckbox" [node]="node"></tree-node-checkbox>
-        <tree-node-expander [node]="node"></tree-node-expander>
-        <div class="node-content-wrapper"
-          [class.node-content-wrapper-active]="node.isActive"
-          [class.node-content-wrapper-focused]="node.isFocused"
-          (click)="node.mouseAction('click', $event)"
-          (dblclick)="node.mouseAction('dblClick', $event)"
-          (contextmenu)="node.mouseAction('contextMenu', $event)"
-          (treeDrop)="node.onDrop($event)"
-          (treeDropDragOver)="node.mouseAction('dragOver', $event)"
-          (treeDropDragLeave)="node.mouseAction('dragLeave', $event)"
-          (treeDropDragEnter)="node.mouseAction('dragEnter', $event)"
-          [treeAllowDrop]="node.allowDrop"
-          [allowDragoverStyling]="node.allowDragoverStyling()"
-          [treeDrag]="node"
-          [treeDragEnabled]="node.allowDrag()">
+          <tree-node-checkbox *ngIf="node.options.useCheckbox" [node]="node"></tree-node-checkbox>
+          <tree-node-expander [node]="node"></tree-node-expander>
+          <div class="node-content-wrapper"
+               [class.node-content-wrapper-active]="node.isActive"
+               [class.node-content-wrapper-focused]="node.isFocused"
+               (click)="node.mouseAction('click', $event)"
+               (dblclick)="node.mouseAction('dblClick', $event)"
+               (mouseover)="node.mouseAction('mouseOver', $event)"
+               (mouseout)="node.mouseAction('mouseOut', $event)"
+               (contextmenu)="node.mouseAction('contextMenu', $event)"
+               (treeDrop)="node.onDrop($event)"
+               (treeDropDragOver)="node.mouseAction('dragOver', $event)"
+               (treeDropDragLeave)="node.mouseAction('dragLeave', $event)"
+               (treeDropDragEnter)="node.mouseAction('dragEnter', $event)"
+               [treeAllowDrop]="node.allowDrop"
+               [allowDragoverStyling]="node.allowDragoverStyling()"
+               [treeDrag]="node"
+               [treeDragEnabled]="node.allowDrag()">
 
-          <tree-node-content [node]="node" [index]="index" [template]="templates.treeNodeTemplate">
-          </tree-node-content>
-        </div>
+              <tree-node-content [node]="node" [index]="index" [template]="templates.treeNodeTemplate">
+              </tree-node-content>
+          </div>
       </div>
-      <ng-container 
-        [ngTemplateOutlet]="templates.treeNodeWrapperTemplate" 
-        [ngTemplateOutletContext]="{ $implicit: node, node: node, index: index, templates: templates }">
+      <ng-container
+              [ngTemplateOutlet]="templates.treeNodeWrapperTemplate"
+              [ngTemplateOutletContext]="{ $implicit: node, node: node, index: index, templates: templates }">
       </ng-container>
-    `
+  `
 })
 
 export class TreeNodeWrapperComponent {
@@ -41,6 +43,7 @@ export class TreeNodeWrapperComponent {
   @Input() index: number;
   @Input() templates: any;
 
-  constructor() { }
+  constructor() {
+  }
 
 }
diff --git a/lib/models/tree-options.model.ts b/lib/models/tree-options.model.ts
@@ -70,7 +70,9 @@ export interface IActionMapping {
     dragOver?: IActionHandler,
     dragLeave?: IActionHandler,
     dragEnter?: IActionHandler,
-    drop?: IActionHandler
+    drop?: IActionHandler,
+    mouseOver?: IActionHandler,
+    mouseOut?: IActionHandler
   };
   keys?: {
     [key: number]: IActionHandler