From 847015365900acb0f5d1426952db6248a6f31f59 Mon Sep 17 00:00:00 2001 From: Heiko Henning UE85540 Date: Fri, 29 Nov 2019 10:02:31 +0100 Subject: [PATCH 1/2] Add onClickItem event --- README.MD | 17 +++++++++++++++++ projects/ngx-tree-dnd/README.md | 17 +++++++++++++++++ .../ngx-tree-dnd-children.component.html | 2 +- .../ngx-tree-dnd-children.component.ts | 9 +++++++++ .../ngx-tree-dnd-parent.component.ts | 6 ++++++ .../src/lib/ngx-tree-dnd.service.ts | 16 ++++++++++++++++ src/app/app.component.html | 1 + src/app/app.component.ts | 5 +++++ 8 files changed, 72 insertions(+), 1 deletion(-) diff --git a/README.MD b/README.MD index 1552f4e..e3885cd 100644 --- a/README.MD +++ b/README.MD @@ -283,6 +283,23 @@ in you component file: } ``` +### onClickItem() +Trigger item was clicked +#### example + +in you template file: + +```xml + +``` +in you component file: + +```typescript + onClickItem(event) { + console.log(event); + } +``` + ### onStartRenameItem() Trigger start renaming item #### example diff --git a/projects/ngx-tree-dnd/README.md b/projects/ngx-tree-dnd/README.md index e14f393..dd68ab0 100644 --- a/projects/ngx-tree-dnd/README.md +++ b/projects/ngx-tree-dnd/README.md @@ -283,6 +283,23 @@ in you component file: } ``` +### onClickItem() +Trigger item was clicked +#### example + +in you template file: + +```xml + +``` +in you component file: + +```typescript + onClickItem(event) { + console.log(event); + } +``` + ### onStartRenameItem() Trigger start renaming item #### example diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.html b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.html index 62ffc41..547140c 100644 --- a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.html +++ b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.html @@ -3,7 +3,7 @@
+ [item]='element' class='draggable-item' (click)="submitClick(element)"> {{element.name}}
diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts index 5d33fab..0114dba 100644 --- a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts +++ b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts @@ -95,6 +95,15 @@ export class NgxTreeChildrenComponent implements AfterViewInit { }); } + /* + Event: onClick; + Element was clicked + Call click() from tree service. + */ + submitClick(element) { + this.treeService.clickItem(element); + } + /* Event: onStartRenameItem; Enable rename mode in element diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts index 8222efc..593fc1a 100644 --- a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts +++ b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts @@ -42,6 +42,7 @@ export class NgxTreeParentComponent implements AfterViewInit { @Output() onallowdrop: EventEmitter = new EventEmitter(); @Output() ondragend: EventEmitter = new EventEmitter(); @Output() onadditem: EventEmitter = new EventEmitter(); + @Output() onClickItem: EventEmitter = new EventEmitter(); @Output() onStartRenameItem: EventEmitter = new EventEmitter(); @Output() onFinishRenameItem: EventEmitter = new EventEmitter(); @Output() onStartDeleteItem: EventEmitter = new EventEmitter(); @@ -115,6 +116,11 @@ export class NgxTreeParentComponent implements AfterViewInit { this.onadditem.emit(event); } ); + this.treeService.onClickItem.subscribe( + (event) => { + this.onClickItem.emit(event); + } + ); this.treeService.onStartRenameItem.subscribe( (event) => { this.onStartRenameItem.emit(event); diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts index cf98ae9..45be25b 100644 --- a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts +++ b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts @@ -27,6 +27,7 @@ export class NgxTreeService { onDrag = new Subject(); onAllowDrop = new Subject(); onDragEnd = new Subject(); + onClickItem = new Subject(); onAddItem = new Subject(); onRenameItem = new Subject(); onStartRenameItem = new Subject(); @@ -166,6 +167,21 @@ export class NgxTreeService { this.clearAction(); } + /* + Trigger click on element. + It`s accepts 'name' and 'id' for find item on tree and set the name. + Emit onClickItem Subject. + */ + public clickItem(element) { + this.elementFinder(this.treeStorage, element.id); + // event emit + const eventEmit = { + element: this.findingResults.foundItem, + parent: this.findingResults.parentItem || 'root' + }; + this.onClickItem.next(eventEmit); + } + /* Trigger start rename element. It`s accepts 'name' and 'id' for find item on tree and set the name. diff --git a/src/app/app.component.html b/src/app/app.component.html index 0d2fe4a..73c9fc4 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,6 +3,7 @@ Date: Fri, 10 Jan 2020 23:28:31 +0100 Subject: [PATCH 2/2] provide tooltip possibility by add events for mouseEnter and mouseLeave --- package-lock.json | 46 ++++++++++++++----- projects/ngx-tree-dnd/package-lock.json | 38 +++++++-------- projects/ngx-tree-dnd/package.json | 2 +- .../ngx-tree-dnd-children.component.html | 4 +- .../ngx-tree-dnd-children.component.ts | 20 +++++++- .../ngx-tree-dnd-parent.component.ts | 12 +++++ .../src/lib/ngx-tree-dnd.service.ts | 24 ++++++++++ src/app/app.component.html | 2 + src/app/app.component.ts | 10 ++++ 9 files changed, 123 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index c74eed6..8791fe6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1274,6 +1274,7 @@ "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", "dev": true, + "optional": true, "requires": { "kind-of": "^3.0.2", "longest": "^1.0.1", @@ -1285,6 +1286,7 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, + "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -4613,7 +4615,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -4634,12 +4637,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4654,17 +4659,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -4781,7 +4789,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -4793,6 +4802,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4807,6 +4817,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4814,12 +4825,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -4838,6 +4851,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -4918,7 +4932,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -4930,6 +4945,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5015,7 +5031,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5051,6 +5068,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5070,6 +5088,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5113,12 +5132,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -7264,7 +7285,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true + "dev": true, + "optional": true }, "loose-envify": { "version": "1.4.0", diff --git a/projects/ngx-tree-dnd/package-lock.json b/projects/ngx-tree-dnd/package-lock.json index 9b998e6..8ab9c5a 100644 --- a/projects/ngx-tree-dnd/package-lock.json +++ b/projects/ngx-tree-dnd/package-lock.json @@ -1,42 +1,42 @@ { "name": "ngx-tree-dnd", - "version": "2.2.3", + "version": "2.6.0", "lockfileVersion": 1, "requires": true, "dependencies": { "@fortawesome/angular-fontawesome": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.2.0.tgz", - "integrity": "sha512-iBaH3ulJh+WjaNHqDxoKR6D4udgY+C7FChVSFOv0u7rjdT8wd0ap5YS1QHA82K0dfkUAvlEA4l5wtDtUpG679A==", + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.2.1.tgz", + "integrity": "sha512-B77fIEjq9bgHGncx5sfFuANh6qow6+MLHbU6C7lMIdeLXykkWTWOiPk+CqlmPOYXIpUH1lNaVykgTSqAk65pIw==", "requires": { - "tslib": "1.9.3" + "tslib": "^1.9.0" } }, "@fortawesome/fontawesome-common-types": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.4.tgz", - "integrity": "sha512-0qbIVm+MzkxMwKDx8V0C7w/6Nk+ZfBseOn2R1YK0f2DQP5pBcOQbu9NmaVaLzbJK6VJb1TuyTf0ZF97rc6iWJQ==" + "version": "0.2.25", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz", + "integrity": "sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q==" }, "@fortawesome/fontawesome-svg-core": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.4.tgz", - "integrity": "sha512-oGtnwcdhJomoDxbJcy6S0JxK6ItDhJLNOujm+qILPqajJ2a0P/YRomzBbixFjAPquCoyPUlA9g9ejA22P7TKNA==", + "version": "1.2.25", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.25.tgz", + "integrity": "sha512-MotKnn53JKqbkLQiwcZSBJVYtTgIKFbh7B8+kd05TSnfKYPFmjKKI59o2fpz5t0Hzl35vVGU6+N4twoOpZUrqA==", "requires": { - "@fortawesome/fontawesome-common-types": "0.2.4" + "@fortawesome/fontawesome-common-types": "^0.2.25" } }, "@fortawesome/free-solid-svg-icons": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.3.1.tgz", - "integrity": "sha512-NkiLBFoiHtJ89cPJdM+W6cLvTVKkLh3j9t3MxkXyip0ncdD3lhCunSuzvFcrTHWeETEyoClGd8ZIWrr3HFZ3BA==", + "version": "5.11.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz", + "integrity": "sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==", "requires": { - "@fortawesome/fontawesome-common-types": "0.2.4" + "@fortawesome/fontawesome-common-types": "^0.2.25" } }, "tslib": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz", - "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==" + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz", + "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==" } } } diff --git a/projects/ngx-tree-dnd/package.json b/projects/ngx-tree-dnd/package.json index 5952a47..aa28d94 100644 --- a/projects/ngx-tree-dnd/package.json +++ b/projects/ngx-tree-dnd/package.json @@ -10,7 +10,7 @@ "email": "13ccdd@gmail.com" }, "keywords": [ - "angular" , + "angular", "treeview", "angular-tree", "angular-tree-dnd", diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.html b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.html index 547140c..171267f 100644 --- a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.html +++ b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.html @@ -1,9 +1,9 @@
-
+
+ [item]='element' class='draggable-item' (click)="submitClick(element)" (mouseenter)="submitMouseenter(element, $event)" (mouseleave)="submitMouseleave(element, $event)"> {{element.name}}
diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts index 0114dba..8fac94c 100644 --- a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts +++ b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts @@ -95,7 +95,7 @@ export class NgxTreeChildrenComponent implements AfterViewInit { }); } - /* + /* Event: onClick; Element was clicked Call click() from tree service. @@ -104,6 +104,24 @@ export class NgxTreeChildrenComponent implements AfterViewInit { this.treeService.clickItem(element); } + /* + Event: onMouseEnter; + Element was triggered + Call mouseEnter() from tree service. + */ + submitMouseenter(element, event) { + this.treeService.mouseEnterItem(element, event); + } + + /* + Event: onMouseLeave; + Element was triggered + Call mouseLeave() from tree service. + */ + submitMouseleave(element, event) { + this.treeService.mouseLeaveItem(element, event); + } + /* Event: onStartRenameItem; Enable rename mode in element diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts index 593fc1a..a1a0f2d 100644 --- a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts +++ b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts @@ -43,6 +43,8 @@ export class NgxTreeParentComponent implements AfterViewInit { @Output() ondragend: EventEmitter = new EventEmitter(); @Output() onadditem: EventEmitter = new EventEmitter(); @Output() onClickItem: EventEmitter = new EventEmitter(); + @Output() onMouseEnterItem: EventEmitter = new EventEmitter(); + @Output() onMouseLeaveItem: EventEmitter = new EventEmitter(); @Output() onStartRenameItem: EventEmitter = new EventEmitter(); @Output() onFinishRenameItem: EventEmitter = new EventEmitter(); @Output() onStartDeleteItem: EventEmitter = new EventEmitter(); @@ -121,6 +123,16 @@ export class NgxTreeParentComponent implements AfterViewInit { this.onClickItem.emit(event); } ); + this.treeService.onMouseEnterItem.subscribe( + (event) => { + this.onMouseEnterItem.emit(event); + } + ); + this.treeService.onMouseLeaveItem.subscribe( + (event) => { + this.onMouseLeaveItem.emit(event); + } + ); this.treeService.onStartRenameItem.subscribe( (event) => { this.onStartRenameItem.emit(event); diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts index 45be25b..286e8ec 100644 --- a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts +++ b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts @@ -28,6 +28,8 @@ export class NgxTreeService { onAllowDrop = new Subject(); onDragEnd = new Subject(); onClickItem = new Subject(); + onMouseEnterItem = new Subject(); + onMouseLeaveItem = new Subject(); onAddItem = new Subject(); onRenameItem = new Subject(); onStartRenameItem = new Subject(); @@ -182,6 +184,28 @@ export class NgxTreeService { this.onClickItem.next(eventEmit); } + public mouseEnterItem(element, event) { + this.elementFinder(this.treeStorage, element.id); + // event emit + const eventEmit = { + event: event, + element: this.findingResults.foundItem, + parent: this.findingResults.parentItem || 'root' + }; + this.onMouseEnterItem.next(eventEmit); + } + + public mouseLeaveItem(element, event) { + this.elementFinder(this.treeStorage, element.id); + // event emit + const eventEmit = { + event: event, + element: this.findingResults.foundItem, + parent: this.findingResults.parentItem || 'root' + }; + this.onMouseLeaveItem.next(eventEmit); + } + /* Trigger start rename element. It`s accepts 'name' and 'id' for find item on tree and set the name. diff --git a/src/app/app.component.html b/src/app/app.component.html index 73c9fc4..ae04a06 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,6 +4,8 @@ [treeData]='myTree' (ondrop)='onDrop($event)' (onClickItem)="onClickItem($event)" + (onMouseEnterItem)="onMouseEnterItem($event)" + (onMouseLeaveItem)="onMouseLeaveItem($event)" (onStartRenameItem)="onStartRenameItem($event)" (onFinishRenameItem)='onFinishRenameItem($event)' (onStartDeleteItem)='onStartDelete($event)' diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9e45eb0..661fb6d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -106,6 +106,16 @@ export class AppComponent { console.log(this.myTree); console.log(event); } + onMouseEnterItem(event) { + console.log('mouse enter'); + console.log(this.myTree); + console.log(event); + } + onMouseLeaveItem(event) { + console.log('mouse leave'); + console.log(this.myTree); + console.log(event); + } onFinishRenameItem(event) { console.log('finish rename'); console.log(this.myTree);