rickonchen / feedback Goto Github PK

It doesn't seem to work with Angular 8 projects. I've imported the FeedbackModule in app.

Currently allowTaint option is hardcoded as true. Because of that it is throwing error in our application having images.
Is it possible to expose allowTaint option of html2canvas from our application

When I'm installing the module, I get the following warnings:

npm WARN [email protected] requires a peer of @angular/common@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.

I currently have:

"@angular/common": "~7.2.9"
"@angular/core": "~7.2.9"

It would be nice to update the dependencies to support Angular 7 and get rid of these warnings.

When using the feedback in an li-element in Firefox, some errors occur.
<li class="hidden-xs" feedback (send)="sendFeedback($event)"></li>

The errors that I get are (more info in screenshots):

• Invalid value given for Length: "auto"
• ERROR DOMException: "The operation is insecure."
• ERROR TypeError: "Argument 1 of Node.appendChild is not an object."

The errors only occur when I am using Firefox. They don't appear in Chrome. I'm using Angular-cli 7.3.3.

I tried to add ng-feedback as described to my application but I get the following error message:

ERROR in node_modules/ng-feedback/feedback-dialog/feedback-dialog.component.ts(2,10): error TS2724: Module '"../node_modules/@angular/material/material"' has no exported member 'MdDialogRef'. Did you mean 'MatDialogRef'?
node_modules/ng-feedback/feedback.directive.ts(2,10): error TS2724: Module '"./node_modules/@angular/material/material"' has no exported member 'MdDialog'. Did you mean 'MatDialog'?
node_modules/ng-feedback/feedback.module.ts(10,3): error TS2724: Module '"./node_modules/@angular/material/material"' has no exported member 'MdDialogModule'. Did you mean 'MatDialogModule'?
node_modules/ng-feedback/feedback.module.ts(11,3): error TS2724: Module '"./node_modules/@angular/material/material"' has no exported member 'MdButtonModule'. Did you mean 'MatButtonModule'?
node_modules/ng-feedback/feedback.module.ts(12,3): error TS2724: Module '"./node_modules/@angular/material/material"' has no exported member 'MdIconModule'. Did you mean 'MatIconModule'?
node_modules/ng-feedback/feedback.module.ts(13,3): error TS2724: Module '"./node_modules/@angular/material/material"' has no exported member 'MdInputModule'. Did you mean 'MatInputModule'?
node_modules/ng-feedback/feedback.module.ts(14,3): error TS2724: Module '"./node_modules/@angular/material/material"' has no exported member 'MdTooltipModule'. Did you mean 'MatTooltipModule'?
node_modules/ng-feedback/feedback.module.ts(15,3): error TS2724: Module '"./node_modules/@angular/material/material"' has no exported member 'MdCheckboxModule'. Did you mean 'MatCheckboxModule'?
node_modules/ng-feedback/feedback.module.ts(16,3): error TS2724: Module '"./node_modules/@angular/material/material"' has no exported member 'MdProgressSpinnerModule'. Did you mean 'MatProgressSpinnerModule'?

Below the Angular CLI version I am using:
Angular CLI: 7.3.9
Node: 10.15.2
OS: linux x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package Version

@angular-devkit/architect 0.13.9
@angular-devkit/build-angular 0.13.9
@angular-devkit/build-optimizer 0.13.9
@angular-devkit/build-webpack 0.13.9
@angular-devkit/core 7.3.9
@angular-devkit/schematics 7.3.9
@angular/cdk 7.3.7
@angular/cli 7.3.9
@angular/material 7.3.7
@ngtools/webpack 7.3.9
@schematics/angular 7.3.9
@schematics/update 0.13.9
rxjs 6.5.2
typescript 3.2.2
webpack 4.29.0

Does anyone know what I can do to make it work? Thank you very much!

EDIT:
I changed the indicated issues within the node-modules but now am getting following error:
ERROR in ./node_modules/ng-feedback/index.ts Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): Error: /home/user/Documents/project/node_modules/ng-feedback/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv). at AngularCompilerPlugin.getCompiledFile (/home/user/Documents/project/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:752:23) at plugin.done.then (/home/user/Documents/project/node_modules/@ngtools/webpack/src/loader.js:41:31) at process._tickCallback (internal/process/next_tick.js:68:7)

While all the perquisites are installed I am receiving this exception ERROR in Unexpected value 'MatDialogModule in node_modules/@angular/material/index.d.ts' imported by the module 'FeedbackModule in node_modules/ng-feedback/ng-feedback.d.ts'. Please add a @NgModule annotation.

Hi Rickon Thank you for the great project.

How to show the validation message when the user click Send button, if the description is empty?

Thank You..!

After open of the feedback dialog, background of other layered component is invisible.

Other layered component use also div with css class .mat-dialog-container.
feedback-dialog component set "mat-dialog-container" invisible.

https://github.com/RickonChen/feedback/blob/190e9fb6e5ddaa2fab372fbf3cb9a6d0e041e661/src/app/feedback/feedback-dialog/feedback-dialog.component.css

/deep/ .mat-dialog-container {
padding: 0;
overflow: visible;
background-color: rgba(255, 255, 255, 0);
box-shadow: initial;
}

Expected: after closing feedback-dialog , component restore default css for .mat-dialog-container

Hi,

First of all, I want to say thank you and very well done for an excellent project!
I embedded it easily and it works as expected.

I have only one question, is it possible to display a template in the description for the user to fill? Currently, there is an autofocus to the description field so the placeholder ("Describe your issue or share your ideas") display only for a split second.

Thanks!

Great that the module is now working on Angular6. However, I'm facing an issue on Google Chrome and Safari with the Overlay for highlighting parts of the image. While it displays everything correctly while drawing the yellow rect and also it shows the right image in the preview, the final image is widely offset and the covering layer seems way too small:

What are possible reasons for this ?

Absolutely fantastic effort RichonChen, really well done! I've been looking for something as true to Google's own version for some time and an Angular 4+ version with Angular Material is perfect!

I have made some modifications to get this working in Angular 6, rxjs version 6+ and the latest Angular Material. It seems to work really well now.

I'm new to GitHub, but these changes may be useful to others: -

1. All references to Angular Material objects should be prefixed Mat instead of Md for imports and mat- instead of md- for HTML elements. For example in feedback.module.ts change the following: -

import { MatDialogModule, MatButtonModule, MatIconModule, MatInputModule, MatTooltipModule, MatCheckboxModule, MatProgressSpinnerModule } from '@angular/material';

imports: [ MatDialogModule, MatButtonModule, MatIconModule, MatInputModule, MatTooltipModule, CommonModule, FormsModule, MatCheckboxModule, MatProgressSpinnerModule ]

2. Update to use the most recent version of rxjs.

For example in feedback.service.ts...
import { Subject } from 'rxjs';

In feedback-dialog.component.ts...

import { Observable, fromEvent, from } from 'rxjs'; import {mergeMap, map, finalize, takeUntil} from 'rxjs/operators';

and change the use of the operators to a pipe rather than chaining, as follows: -

return mouseMove.pipe( map((mouseMoveEvent: MouseEvent) => { newRectangle.width = mouseMoveEvent.clientX - mouseDownEvent.clientX; newRectangle.height = mouseMoveEvent.clientY - mouseDownEvent.clientY; return newRectangle; }), finalize(() => { this.rectangles.push(newRectangle); }), takeUntil(mouseUp));

similarly in feedback-toolbar.component.ts...

return mouseMove.pipe( map((mm: MouseEvent) => { mm.preventDefault(); return { left: mm.clientX - startX, top: mm.clientY - startY }; }), finalize(() => { this.disableToolbarTips = false; }), takeUntil(mouseUp)); }));

3. By far the most important change is to update the return from html2canvas to be a promise like this: -

html2canvas(wholehtml).then(canvas => { this.screenshotCanvasSource.next(canvas); });

Once again, great effort, well done.

Since the last Version the file feedback.service.d.ts causes build errors on angular CLI 6.

ERROR in node_modules/ng-feedback/lib/feedback.service.d.ts(3,30): error TS1005: ';' expected. node_modules/ng-feedback/lib/feedback.service.d.ts(3,96): error TS1005: '(' expected. node_modules/ng-feedback/lib/feedback.service.d.ts(4,5): error TS1128: Declaration or statement expected. node_modules/ng-feedback/lib/feedback.service.d.ts(5,87): error TS1005: '(' expected. node_modules/ng-feedback/lib/feedback.service.d.ts(6,27): error TS1005: ';' expected. node_modules/ng-feedback/lib/feedback.service.d.ts(6,33): error TS1109: Expression expected. node_modules/ng-feedback/lib/feedback.service.d.ts(7,5): error TS1128: Declaration or statement expected. node_modules/ng-feedback/lib/feedback.service.d.ts(8,21): error TS1005: ',' expected. node_modules/ng-feedback/lib/feedback.service.d.ts(8,27): error TS1005: ';' expected. node_modules/ng-feedback/lib/feedback.service.d.ts(8,33): error TS1109: Expression expected. node_modules/ng-feedback/lib/feedback.service.d.ts(9,25): error TS1005: ',' expected. node_modules/ng-feedback/lib/feedback.service.d.ts(9,31): error TS1005: ';' expected. node_modules/ng-feedback/lib/feedback.service.d.ts(9,37): error TS1109: Expression expected. node_modules/ng-feedback/lib/feedback.service.d.ts(10,21): error TS1005: ',' expected. node_modules/ng-feedback/lib/feedback.service.d.ts(10,27): error TS1005: ';' expected. node_modules/ng-feedback/lib/feedback.service.d.ts(11,1): error TS1128: Declaration or statement expected.

Proposed Solution

I got it working after replacing the Rxjs related imports by

import {Observable} from "rxjs/Rx";

this is what my working file looks like:

`import {Observable} from "rxjs/Rx";

export declare class FeedbackService {
private screenshotCanvasSource;
screenshotCanvas$:Observable;
private feedbackSource;
feedback$: Observable<{}>;
initScreenshotCanvas(): void;
private generateExistingCanvas;
setCanvas(canvas: any): void;
setFeedback(feedback: any): void;
getImgEle(canvas: any): HTMLImageElement;
}
`