ngx-easy-image-drawing 0.0.30 → 0.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +3 -1
  2. package/fesm2022/ngx-easy-image-drawing.mjs +11 -11
  3. package/fesm2022/ngx-easy-image-drawing.mjs.map +1 -1
  4. package/index.d.ts +45 -5
  5. package/package.json +14 -13
  6. package/lib/easy-image-drawing.component.d.ts +0 -42
  7. package/public-api.d.ts +0 -1
package/README.md CHANGED
@@ -15,7 +15,9 @@ npm install ngx-easy-image-drawing
15
15
  ## Versions
16
16
  | Version | Option |
17
17
  |----------|-----------------------------|
18
- | ^0.0.30 | Angular 19. |
18
+ | ^0.0.30 | Angular 19. |
19
+ | ^0.0.31 | Angular 20. |
20
+
19
21
 
20
22
  ## Usage
21
23
 
package/fesm2022/ngx-easy-image-drawing.mjs CHANGED
@@ -5,13 +5,13 @@ import { MatSliderModule } from '@angular/material/slider';
5
5
  class EasyImageDrawing {
6
6
  constructor(renderer) {
7
7
  this.renderer = renderer;
8
- this.width = input(500);
9
- this.height = input(500);
10
- this.src = input("");
11
- this.saveButtonColor = input("#4caf50");
12
- this.undoButtonColor = input("#f44336");
13
- this.showColorPicker = input(true);
14
- this.showlineWidthPicker = input(true);
8
+ this.width = input(500, ...(ngDevMode ? [{ debugName: "width" }] : []));
9
+ this.height = input(500, ...(ngDevMode ? [{ debugName: "height" }] : []));
10
+ this.src = input("", ...(ngDevMode ? [{ debugName: "src" }] : []));
11
+ this.saveButtonColor = input("#4caf50", ...(ngDevMode ? [{ debugName: "saveButtonColor" }] : []));
12
+ this.undoButtonColor = input("#f44336", ...(ngDevMode ? [{ debugName: "undoButtonColor" }] : []));
13
+ this.showColorPicker = input(true, ...(ngDevMode ? [{ debugName: "showColorPicker" }] : []));
14
+ this.showlineWidthPicker = input(true, ...(ngDevMode ? [{ debugName: "showlineWidthPicker" }] : []));
15
15
  this.savedImage = output();
16
16
  this.lineWidth = 5;
17
17
  this.lineColor = "black";
@@ -138,13 +138,13 @@ class EasyImageDrawing {
138
138
  ngOnDestroy() {
139
139
  this.eventListeners.forEach((unlisten) => unlisten());
140
140
  }
141
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EasyImageDrawing, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
142
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: EasyImageDrawing, isStandalone: true, selector: "easy-image-drawing", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, saveButtonColor: { classPropertyName: "saveButtonColor", publicName: "saveButtonColor", isSignal: true, isRequired: false, transformFunction: null }, undoButtonColor: { classPropertyName: "undoButtonColor", publicName: "undoButtonColor", isSignal: true, isRequired: false, transformFunction: null }, showColorPicker: { classPropertyName: "showColorPicker", publicName: "showColorPicker", isSignal: true, isRequired: false, transformFunction: null }, showlineWidthPicker: { classPropertyName: "showlineWidthPicker", publicName: "showlineWidthPicker", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { savedImage: "savedImage" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["drawingCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"canvas-wrapper\">\r\n <canvas id=\"canvas\" #drawingCanvas></canvas>\r\n</div>\r\n<div class=\"image-button-wrapper\">\r\n <button\r\n type=\"button\"\r\n (click)=\"save()\"\r\n class=\"button save\"\r\n [style.background-color]=\"saveButtonColor()\"\r\n >\r\n Save\r\n </button>\r\n <button\r\n type=\"button\"\r\n (click)=\"clear()\"\r\n class=\"button undo\"\r\n [style.background-color]=\"undoButtonColor()\"\r\n >\r\n Undo\r\n </button>\r\n</div>\r\n<!-- color picker -->\r\n@if(showColorPicker()){\r\n<div class=\"color-picker-wrapper\">\r\n <button\r\n class=\"color-picker\"\r\n id=\"black\"\r\n (click)=\"onColorSelected('black')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"red\"\r\n (click)=\"onColorSelected('red')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"green\"\r\n (click)=\"onColorSelected('green')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"blue\"\r\n (click)=\"onColorSelected('blue')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"yellow\"\r\n (click)=\"onColorSelected('yellow')\"\r\n ></button>\r\n</div>\r\n}\r\n<!-- line width picker -->\r\n@if(showlineWidthPicker()){\r\n<div class=\"line-width-slider\">\r\n <input\r\n type=\"range\"\r\n min=\"5\"\r\n max=\"20\"\r\n value=\"5\"\r\n (input)=\"onLineWidthChanged($event)\"\r\n />\r\n</div>\r\n}\r\n", styles: ["@media only screen and (max-width: 900px){:host{display:flex;flex-direction:column;height:100%;width:100%}}.image-button-wrapper{display:flex;justify-content:center;margin:0 10px 10px 0}#canvas{border:1px solid #ccc;cursor:crosshair;max-width:100%;max-height:100%}.canvas-wrapper{display:flex;align-items:center;justify-content:center}.button-wrapper{display:flex;justify-content:center;margin-top:10px}button{margin:1rem;border:none;border-radius:5px;color:#fff;padding:.5rem 1rem;text-align:center;text-decoration:none;display:inline-block;font-size:16px;cursor:pointer}.color-picker-wrapper,.line-width-slider{display:flex;justify-content:center;margin:10px 0}.color-picker{margin:0 5px}#black{background-color:#000}#red{background-color:red}#green{background-color:green}#blue{background-color:#00f}#yellow{background-color:#ff0}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }] }); }
141
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EasyImageDrawing, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
142
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EasyImageDrawing, isStandalone: true, selector: "easy-image-drawing", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, saveButtonColor: { classPropertyName: "saveButtonColor", publicName: "saveButtonColor", isSignal: true, isRequired: false, transformFunction: null }, undoButtonColor: { classPropertyName: "undoButtonColor", publicName: "undoButtonColor", isSignal: true, isRequired: false, transformFunction: null }, showColorPicker: { classPropertyName: "showColorPicker", publicName: "showColorPicker", isSignal: true, isRequired: false, transformFunction: null }, showlineWidthPicker: { classPropertyName: "showlineWidthPicker", publicName: "showlineWidthPicker", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { savedImage: "savedImage" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["drawingCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"canvas-wrapper\">\r\n <canvas id=\"canvas\" #drawingCanvas></canvas>\r\n</div>\r\n<div class=\"image-button-wrapper\">\r\n <button\r\n type=\"button\"\r\n (click)=\"save()\"\r\n class=\"button save\"\r\n [style.background-color]=\"saveButtonColor()\"\r\n >\r\n Save\r\n </button>\r\n <button\r\n type=\"button\"\r\n (click)=\"clear()\"\r\n class=\"button undo\"\r\n [style.background-color]=\"undoButtonColor()\"\r\n >\r\n Undo\r\n </button>\r\n</div>\r\n<!-- color picker -->\r\n@if(showColorPicker()){\r\n<div class=\"color-picker-wrapper\">\r\n <button\r\n class=\"color-picker\"\r\n id=\"black\"\r\n (click)=\"onColorSelected('black')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"red\"\r\n (click)=\"onColorSelected('red')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"green\"\r\n (click)=\"onColorSelected('green')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"blue\"\r\n (click)=\"onColorSelected('blue')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"yellow\"\r\n (click)=\"onColorSelected('yellow')\"\r\n ></button>\r\n</div>\r\n}\r\n<!-- line width picker -->\r\n@if(showlineWidthPicker()){\r\n<div class=\"line-width-slider\">\r\n <input\r\n type=\"range\"\r\n min=\"5\"\r\n max=\"20\"\r\n value=\"5\"\r\n (input)=\"onLineWidthChanged($event)\"\r\n />\r\n</div>\r\n}\r\n", styles: ["@media only screen and (max-width: 900px){:host{display:flex;flex-direction:column;height:100%;width:100%}}.image-button-wrapper{display:flex;justify-content:center;margin:0 10px 10px 0}#canvas{border:1px solid #ccc;cursor:crosshair;max-width:100%;max-height:100%}.canvas-wrapper{display:flex;align-items:center;justify-content:center}.button-wrapper{display:flex;justify-content:center;margin-top:10px}button{margin:1rem;border:none;border-radius:5px;color:#fff;padding:.5rem 1rem;text-align:center;text-decoration:none;display:inline-block;font-size:16px;cursor:pointer}.color-picker-wrapper,.line-width-slider{display:flex;justify-content:center;margin:10px 0}.color-picker{margin:0 5px}#black{background-color:#000}#red{background-color:red}#green{background-color:green}#blue{background-color:#00f}#yellow{background-color:#ff0}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }] }); }
143
143
  }
144
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EasyImageDrawing, decorators: [{
144
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EasyImageDrawing, decorators: [{
145
145
  type: Component,
146
146
  args: [{ selector: "easy-image-drawing", imports: [MatSliderModule], template: "<div class=\"canvas-wrapper\">\r\n <canvas id=\"canvas\" #drawingCanvas></canvas>\r\n</div>\r\n<div class=\"image-button-wrapper\">\r\n <button\r\n type=\"button\"\r\n (click)=\"save()\"\r\n class=\"button save\"\r\n [style.background-color]=\"saveButtonColor()\"\r\n >\r\n Save\r\n </button>\r\n <button\r\n type=\"button\"\r\n (click)=\"clear()\"\r\n class=\"button undo\"\r\n [style.background-color]=\"undoButtonColor()\"\r\n >\r\n Undo\r\n </button>\r\n</div>\r\n<!-- color picker -->\r\n@if(showColorPicker()){\r\n<div class=\"color-picker-wrapper\">\r\n <button\r\n class=\"color-picker\"\r\n id=\"black\"\r\n (click)=\"onColorSelected('black')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"red\"\r\n (click)=\"onColorSelected('red')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"green\"\r\n (click)=\"onColorSelected('green')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"blue\"\r\n (click)=\"onColorSelected('blue')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"yellow\"\r\n (click)=\"onColorSelected('yellow')\"\r\n ></button>\r\n</div>\r\n}\r\n<!-- line width picker -->\r\n@if(showlineWidthPicker()){\r\n<div class=\"line-width-slider\">\r\n <input\r\n type=\"range\"\r\n min=\"5\"\r\n max=\"20\"\r\n value=\"5\"\r\n (input)=\"onLineWidthChanged($event)\"\r\n />\r\n</div>\r\n}\r\n", styles: ["@media only screen and (max-width: 900px){:host{display:flex;flex-direction:column;height:100%;width:100%}}.image-button-wrapper{display:flex;justify-content:center;margin:0 10px 10px 0}#canvas{border:1px solid #ccc;cursor:crosshair;max-width:100%;max-height:100%}.canvas-wrapper{display:flex;align-items:center;justify-content:center}.button-wrapper{display:flex;justify-content:center;margin-top:10px}button{margin:1rem;border:none;border-radius:5px;color:#fff;padding:.5rem 1rem;text-align:center;text-decoration:none;display:inline-block;font-size:16px;cursor:pointer}.color-picker-wrapper,.line-width-slider{display:flex;justify-content:center;margin:10px 0}.color-picker{margin:0 5px}#black{background-color:#000}#red{background-color:red}#green{background-color:green}#blue{background-color:#00f}#yellow{background-color:#ff0}\n"] }]
147
- }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { canvas: [{
147
+ }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], saveButtonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveButtonColor", required: false }] }], undoButtonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoButtonColor", required: false }] }], showColorPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColorPicker", required: false }] }], showlineWidthPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showlineWidthPicker", required: false }] }], savedImage: [{ type: i0.Output, args: ["savedImage"] }], canvas: [{
148
148
  type: ViewChild,
149
149
  args: ["drawingCanvas"]
150
150
  }] } });
package/fesm2022/ngx-easy-image-drawing.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ngx-easy-image-drawing.mjs","sources":["../../../projects/ngx-easy-image-drawing/src/lib/easy-image-drawing.component.ts","../../../projects/ngx-easy-image-drawing/src/lib/easy-image-drawing.component.html","../../../projects/ngx-easy-image-drawing/src/public-api.ts","../../../projects/ngx-easy-image-drawing/src/ngx-easy-image-drawing.ts"],"sourcesContent":["import {\r\n Component,\r\n ViewChild,\r\n ElementRef,\r\n AfterViewInit,\r\n OnDestroy,\r\n OnChanges,\r\n Renderer2,\r\n SimpleChanges,\r\n output,\r\n input,\r\n} from \"@angular/core\";\r\nimport { MatSliderModule } from \"@angular/material/slider\";\r\n\r\n@Component({\n selector: \"easy-image-drawing\",\n imports: [MatSliderModule],\n templateUrl: \"./easy-image-drawing.component.html\",\n styleUrls: [\"./easy-image-drawing.component.scss\"]\n})\r\nexport class EasyImageDrawing implements OnChanges, AfterViewInit, OnDestroy {\r\n width = input<number>(500);\r\n height = input<number>(500);\r\n src = input<string>(\"\");\r\n saveButtonColor = input<string>(\"#4caf50\");\r\n undoButtonColor = input<string>(\"#f44336\");\r\n showColorPicker = input<boolean>(true);\r\n showlineWidthPicker = input<boolean>(true);\r\n savedImage = output<File>();\r\n\r\n // its important myCanvas matches the variable name in the template\r\n @ViewChild(\"drawingCanvas\") canvas!: ElementRef<HTMLCanvasElement>;\r\n\r\n context!: CanvasRenderingContext2D;\r\n\r\n private lineWidth = 5;\r\n private lineColor = \"black\";\r\n private previousPosition: { x: number; y: number } = { x: 0, y: 0 };\r\n private activePath = false;\r\n private eventListeners: (() => void)[] = [];\r\n\r\n constructor(private renderer: Renderer2) {}\r\n\r\n ngAfterViewInit(): void {\r\n this._setCanvas();\r\n this._setMouseEvents();\r\n this._setMouseEventsMobile();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes[\"src\"] && !changes[\"src\"].firstChange) {\r\n this.clear();\r\n }\r\n }\r\n public save(): void {\r\n const dataUrl = this.canvas.nativeElement.toDataURL(\"image/png\");\r\n const blob = this._dataURItoBlob(dataUrl);\r\n this.savedImage.emit(new File([blob], \"image.png\"));\r\n }\r\n\r\n public clear(): void {\r\n this.context.clearRect(0, 0, this.width(), this.height());\r\n const image = new Image();\r\n image.src = this.src();\r\n image.onload = () => {\r\n this.context.drawImage(image, 0, 0, this.width(), this.height());\r\n };\r\n }\r\n\r\n public onColorSelected(color: string): void {\r\n this.context.strokeStyle = color;\r\n }\r\n\r\n public onLineWidthChanged(event: any): void {\r\n if (event?.target?.value) {\r\n this.context.lineWidth = event.target.value;\r\n }\r\n }\r\n\r\n private _dataURItoBlob(dataUrl: string) {\r\n const byteString = atob(dataUrl.split(\",\")[1]);\r\n const mimeString = dataUrl.split(\",\")[0].split(\":\")[1].split(\";\")[0];\r\n const ab = new ArrayBuffer(byteString.length);\r\n const dw = new DataView(ab);\r\n for (let i = 0; i < byteString.length; i++) {\r\n dw.setUint8(i, byteString.charCodeAt(i));\r\n }\r\n return new Blob([ab], { type: mimeString });\r\n }\r\n\r\n private _drawLine(event: MouseEvent | Touch): void {\r\n const currentPosition = this.getPosition(event.clientX, event.clientY);\r\n this.context.moveTo(this.previousPosition.x, this.previousPosition.y);\r\n this.context.lineTo(currentPosition.x, currentPosition.y);\r\n this.previousPosition = currentPosition;\r\n this.context.stroke();\r\n }\r\n\r\n private getPosition(\r\n clientX: number,\r\n clientY: number\r\n ): { x: number; y: number } {\r\n const rect = this.canvas.nativeElement.getBoundingClientRect();\r\n const scaleX = this.canvas.nativeElement.width / rect.width;\r\n const scaleY = this.canvas.nativeElement.height / rect.height;\r\n return {\r\n x: (clientX - rect.left) * scaleX,\r\n y: (clientY - rect.top) * scaleY,\r\n };\r\n }\r\n\r\n private _setCanvas(): void {\r\n if (!this.canvas) return;\r\n\r\n this.canvas.nativeElement.width = this.width();\r\n this.canvas.nativeElement.height = this.height();\r\n\r\n const context = this.canvas.nativeElement.getContext(\"2d\");\r\n if (!context) {\r\n console.error(\"Failed to get 2D context\");\r\n return;\r\n }\r\n this.context = context;\r\n this.context.lineWidth = this.lineWidth;\r\n this.context.strokeStyle = this.lineColor;\r\n this.context.lineCap = \"round\";\r\n\r\n // set src to image\r\n const image = new Image();\r\n image.src = this.src();\r\n image.onload = () => {\r\n this.context.drawImage(image, 0, 0, this.width(), this.height());\r\n };\r\n }\r\n\r\n private _setMouseEvents(): void {\r\n this.eventListeners.push(\r\n this.renderer.listen(\"window\", \"mousedown\", this._onMouseDown.bind(this)),\r\n this.renderer.listen(\"window\", \"mousemove\", this._onMouseMove.bind(this)),\r\n this.renderer.listen(\"window\", \"mouseup\", this._onMouseUp.bind(this))\r\n );\r\n }\r\n\r\n private _onMouseDown(event: MouseEvent): void {\r\n this.activePath = true;\r\n this.context.beginPath();\r\n this.previousPosition = this.getPosition(event.clientX, event.clientY);\r\n }\r\n\r\n private _onMouseMove(event: MouseEvent): void {\r\n if (this.activePath) {\r\n this._drawLine(event);\r\n }\r\n }\r\n\r\n private _onMouseUp(): void {\r\n if (this.activePath) {\r\n this.context.closePath();\r\n this.activePath = false;\r\n }\r\n }\r\n\r\n private _setMouseEventsMobile(): void {\r\n this.eventListeners.push(\r\n this.renderer.listen(\r\n \"window\",\r\n \"touchstart\",\r\n this._onTouchStart.bind(this)\r\n ),\r\n this.renderer.listen(\"window\", \"touchmove\", this._onTouchMove.bind(this)),\r\n this.renderer.listen(\"window\", \"touchend\", this._onTouchEnd.bind(this))\r\n );\r\n }\r\n\r\n private _onTouchStart(event: TouchEvent): void {\r\n this.activePath = true;\r\n this.context.beginPath();\r\n this.previousPosition = this.getPosition(\r\n event.touches[0].clientX,\r\n event.touches[0].clientY\r\n );\r\n }\r\n\r\n private _onTouchMove(event: TouchEvent): void {\r\n if (this.activePath) {\r\n this._drawLine(event.touches[0]);\r\n }\r\n }\r\n\r\n private _onTouchEnd(): void {\r\n if (this.activePath) {\r\n this.context.closePath();\r\n this.activePath = false;\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.eventListeners.forEach((unlisten) => unlisten());\r\n }\r\n}\r\n","<div class=\"canvas-wrapper\">\r\n <canvas id=\"canvas\" #drawingCanvas></canvas>\r\n</div>\r\n<div class=\"image-button-wrapper\">\r\n <button\r\n type=\"button\"\r\n (click)=\"save()\"\r\n class=\"button save\"\r\n [style.background-color]=\"saveButtonColor()\"\r\n >\r\n Save\r\n </button>\r\n <button\r\n type=\"button\"\r\n (click)=\"clear()\"\r\n class=\"button undo\"\r\n [style.background-color]=\"undoButtonColor()\"\r\n >\r\n Undo\r\n </button>\r\n</div>\r\n<!-- color picker -->\r\n@if(showColorPicker()){\r\n<div class=\"color-picker-wrapper\">\r\n <button\r\n class=\"color-picker\"\r\n id=\"black\"\r\n (click)=\"onColorSelected('black')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"red\"\r\n (click)=\"onColorSelected('red')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"green\"\r\n (click)=\"onColorSelected('green')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"blue\"\r\n (click)=\"onColorSelected('blue')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"yellow\"\r\n (click)=\"onColorSelected('yellow')\"\r\n ></button>\r\n</div>\r\n}\r\n<!-- line width picker -->\r\n@if(showlineWidthPicker()){\r\n<div class=\"line-width-slider\">\r\n <input\r\n type=\"range\"\r\n min=\"5\"\r\n max=\"20\"\r\n value=\"5\"\r\n (input)=\"onLineWidthChanged($event)\"\r\n />\r\n</div>\r\n}\r\n","/*\r\n * Public API Surface of ngx-easy-image-drawing\r\n */\r\n\r\nexport * from \"./lib/easy-image-drawing.component\";\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ngx-easy-image-drawing.mjs","sources":["../../../projects/ngx-easy-image-drawing/src/lib/easy-image-drawing.component.ts","../../../projects/ngx-easy-image-drawing/src/lib/easy-image-drawing.component.html","../../../projects/ngx-easy-image-drawing/src/public-api.ts","../../../projects/ngx-easy-image-drawing/src/ngx-easy-image-drawing.ts"],"sourcesContent":["import {\r\n Component,\r\n ViewChild,\r\n ElementRef,\r\n AfterViewInit,\r\n OnDestroy,\r\n OnChanges,\r\n Renderer2,\r\n SimpleChanges,\r\n output,\r\n input,\r\n} from \"@angular/core\";\r\nimport { MatSliderModule } from \"@angular/material/slider\";\r\n\r\n@Component({\n selector: \"easy-image-drawing\",\n imports: [MatSliderModule],\n templateUrl: \"./easy-image-drawing.component.html\",\n styleUrls: [\"./easy-image-drawing.component.scss\"]\n})\r\nexport class EasyImageDrawing implements OnChanges, AfterViewInit, OnDestroy {\r\n width = input<number>(500);\r\n height = input<number>(500);\r\n src = input<string>(\"\");\r\n saveButtonColor = input<string>(\"#4caf50\");\r\n undoButtonColor = input<string>(\"#f44336\");\r\n showColorPicker = input<boolean>(true);\r\n showlineWidthPicker = input<boolean>(true);\r\n savedImage = output<File>();\r\n\r\n // its important myCanvas matches the variable name in the template\r\n @ViewChild(\"drawingCanvas\") canvas!: ElementRef<HTMLCanvasElement>;\r\n\r\n context!: CanvasRenderingContext2D;\r\n\r\n private lineWidth = 5;\r\n private lineColor = \"black\";\r\n private previousPosition: { x: number; y: number } = { x: 0, y: 0 };\r\n private activePath = false;\r\n private eventListeners: (() => void)[] = [];\r\n\r\n constructor(private renderer: Renderer2) {}\r\n\r\n ngAfterViewInit(): void {\r\n this._setCanvas();\r\n this._setMouseEvents();\r\n this._setMouseEventsMobile();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes[\"src\"] && !changes[\"src\"].firstChange) {\r\n this.clear();\r\n }\r\n }\r\n public save(): void {\r\n const dataUrl = this.canvas.nativeElement.toDataURL(\"image/png\");\r\n const blob = this._dataURItoBlob(dataUrl);\r\n this.savedImage.emit(new File([blob], \"image.png\"));\r\n }\r\n\r\n public clear(): void {\r\n this.context.clearRect(0, 0, this.width(), this.height());\r\n const image = new Image();\r\n image.src = this.src();\r\n image.onload = () => {\r\n this.context.drawImage(image, 0, 0, this.width(), this.height());\r\n };\r\n }\r\n\r\n public onColorSelected(color: string): void {\r\n this.context.strokeStyle = color;\r\n }\r\n\r\n public onLineWidthChanged(event: any): void {\r\n if (event?.target?.value) {\r\n this.context.lineWidth = event.target.value;\r\n }\r\n }\r\n\r\n private _dataURItoBlob(dataUrl: string) {\r\n const byteString = atob(dataUrl.split(\",\")[1]);\r\n const mimeString = dataUrl.split(\",\")[0].split(\":\")[1].split(\";\")[0];\r\n const ab = new ArrayBuffer(byteString.length);\r\n const dw = new DataView(ab);\r\n for (let i = 0; i < byteString.length; i++) {\r\n dw.setUint8(i, byteString.charCodeAt(i));\r\n }\r\n return new Blob([ab], { type: mimeString });\r\n }\r\n\r\n private _drawLine(event: MouseEvent | Touch): void {\r\n const currentPosition = this.getPosition(event.clientX, event.clientY);\r\n this.context.moveTo(this.previousPosition.x, this.previousPosition.y);\r\n this.context.lineTo(currentPosition.x, currentPosition.y);\r\n this.previousPosition = currentPosition;\r\n this.context.stroke();\r\n }\r\n\r\n private getPosition(\r\n clientX: number,\r\n clientY: number\r\n ): { x: number; y: number } {\r\n const rect = this.canvas.nativeElement.getBoundingClientRect();\r\n const scaleX = this.canvas.nativeElement.width / rect.width;\r\n const scaleY = this.canvas.nativeElement.height / rect.height;\r\n return {\r\n x: (clientX - rect.left) * scaleX,\r\n y: (clientY - rect.top) * scaleY,\r\n };\r\n }\r\n\r\n private _setCanvas(): void {\r\n if (!this.canvas) return;\r\n\r\n this.canvas.nativeElement.width = this.width();\r\n this.canvas.nativeElement.height = this.height();\r\n\r\n const context = this.canvas.nativeElement.getContext(\"2d\");\r\n if (!context) {\r\n console.error(\"Failed to get 2D context\");\r\n return;\r\n }\r\n this.context = context;\r\n this.context.lineWidth = this.lineWidth;\r\n this.context.strokeStyle = this.lineColor;\r\n this.context.lineCap = \"round\";\r\n\r\n // set src to image\r\n const image = new Image();\r\n image.src = this.src();\r\n image.onload = () => {\r\n this.context.drawImage(image, 0, 0, this.width(), this.height());\r\n };\r\n }\r\n\r\n private _setMouseEvents(): void {\r\n this.eventListeners.push(\r\n this.renderer.listen(\"window\", \"mousedown\", this._onMouseDown.bind(this)),\r\n this.renderer.listen(\"window\", \"mousemove\", this._onMouseMove.bind(this)),\r\n this.renderer.listen(\"window\", \"mouseup\", this._onMouseUp.bind(this))\r\n );\r\n }\r\n\r\n private _onMouseDown(event: MouseEvent): void {\r\n this.activePath = true;\r\n this.context.beginPath();\r\n this.previousPosition = this.getPosition(event.clientX, event.clientY);\r\n }\r\n\r\n private _onMouseMove(event: MouseEvent): void {\r\n if (this.activePath) {\r\n this._drawLine(event);\r\n }\r\n }\r\n\r\n private _onMouseUp(): void {\r\n if (this.activePath) {\r\n this.context.closePath();\r\n this.activePath = false;\r\n }\r\n }\r\n\r\n private _setMouseEventsMobile(): void {\r\n this.eventListeners.push(\r\n this.renderer.listen(\r\n \"window\",\r\n \"touchstart\",\r\n this._onTouchStart.bind(this)\r\n ),\r\n this.renderer.listen(\"window\", \"touchmove\", this._onTouchMove.bind(this)),\r\n this.renderer.listen(\"window\", \"touchend\", this._onTouchEnd.bind(this))\r\n );\r\n }\r\n\r\n private _onTouchStart(event: TouchEvent): void {\r\n this.activePath = true;\r\n this.context.beginPath();\r\n this.previousPosition = this.getPosition(\r\n event.touches[0].clientX,\r\n event.touches[0].clientY\r\n );\r\n }\r\n\r\n private _onTouchMove(event: TouchEvent): void {\r\n if (this.activePath) {\r\n this._drawLine(event.touches[0]);\r\n }\r\n }\r\n\r\n private _onTouchEnd(): void {\r\n if (this.activePath) {\r\n this.context.closePath();\r\n this.activePath = false;\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.eventListeners.forEach((unlisten) => unlisten());\r\n }\r\n}\r\n","<div class=\"canvas-wrapper\">\r\n <canvas id=\"canvas\" #drawingCanvas></canvas>\r\n</div>\r\n<div class=\"image-button-wrapper\">\r\n <button\r\n type=\"button\"\r\n (click)=\"save()\"\r\n class=\"button save\"\r\n [style.background-color]=\"saveButtonColor()\"\r\n >\r\n Save\r\n </button>\r\n <button\r\n type=\"button\"\r\n (click)=\"clear()\"\r\n class=\"button undo\"\r\n [style.background-color]=\"undoButtonColor()\"\r\n >\r\n Undo\r\n </button>\r\n</div>\r\n<!-- color picker -->\r\n@if(showColorPicker()){\r\n<div class=\"color-picker-wrapper\">\r\n <button\r\n class=\"color-picker\"\r\n id=\"black\"\r\n (click)=\"onColorSelected('black')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"red\"\r\n (click)=\"onColorSelected('red')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"green\"\r\n (click)=\"onColorSelected('green')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"blue\"\r\n (click)=\"onColorSelected('blue')\"\r\n ></button>\r\n <button\r\n class=\"color-picker\"\r\n id=\"yellow\"\r\n (click)=\"onColorSelected('yellow')\"\r\n ></button>\r\n</div>\r\n}\r\n<!-- line width picker -->\r\n@if(showlineWidthPicker()){\r\n<div class=\"line-width-slider\">\r\n <input\r\n type=\"range\"\r\n min=\"5\"\r\n max=\"20\"\r\n value=\"5\"\r\n (input)=\"onLineWidthChanged($event)\"\r\n />\r\n</div>\r\n}\r\n","/*\r\n * Public API Surface of ngx-easy-image-drawing\r\n */\r\n\r\nexport * from \"./lib/easy-image-drawing.component\";\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/index.d.ts CHANGED
@@ -1,5 +1,45 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- /// <amd-module name="ngx-easy-image-drawing" />
5
- export * from './public-api';
1
+ import * as _angular_core from '@angular/core';
2
+ import { OnChanges, AfterViewInit, OnDestroy, ElementRef, Renderer2, SimpleChanges } from '@angular/core';
3
+
4
+ declare class EasyImageDrawing implements OnChanges, AfterViewInit, OnDestroy {
5
+ private renderer;
6
+ width: _angular_core.InputSignal<number>;
7
+ height: _angular_core.InputSignal<number>;
8
+ src: _angular_core.InputSignal<string>;
9
+ saveButtonColor: _angular_core.InputSignal<string>;
10
+ undoButtonColor: _angular_core.InputSignal<string>;
11
+ showColorPicker: _angular_core.InputSignal<boolean>;
12
+ showlineWidthPicker: _angular_core.InputSignal<boolean>;
13
+ savedImage: _angular_core.OutputEmitterRef<File>;
14
+ canvas: ElementRef<HTMLCanvasElement>;
15
+ context: CanvasRenderingContext2D;
16
+ private lineWidth;
17
+ private lineColor;
18
+ private previousPosition;
19
+ private activePath;
20
+ private eventListeners;
21
+ constructor(renderer: Renderer2);
22
+ ngAfterViewInit(): void;
23
+ ngOnChanges(changes: SimpleChanges): void;
24
+ save(): void;
25
+ clear(): void;
26
+ onColorSelected(color: string): void;
27
+ onLineWidthChanged(event: any): void;
28
+ private _dataURItoBlob;
29
+ private _drawLine;
30
+ private getPosition;
31
+ private _setCanvas;
32
+ private _setMouseEvents;
33
+ private _onMouseDown;
34
+ private _onMouseMove;
35
+ private _onMouseUp;
36
+ private _setMouseEventsMobile;
37
+ private _onTouchStart;
38
+ private _onTouchMove;
39
+ private _onTouchEnd;
40
+ ngOnDestroy(): void;
41
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<EasyImageDrawing, never>;
42
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<EasyImageDrawing, "easy-image-drawing", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "saveButtonColor": { "alias": "saveButtonColor"; "required": false; "isSignal": true; }; "undoButtonColor": { "alias": "undoButtonColor"; "required": false; "isSignal": true; }; "showColorPicker": { "alias": "showColorPicker"; "required": false; "isSignal": true; }; "showlineWidthPicker": { "alias": "showlineWidthPicker"; "required": false; "isSignal": true; }; }, { "savedImage": "savedImage"; }, never, never, true, never>;
43
+ }
44
+
45
+ export { EasyImageDrawing };
package/package.json CHANGED
@@ -1,17 +1,27 @@
1
1
  {
2
2
  "name": "ngx-easy-image-drawing",
3
- "version": "0.0.30",
3
+ "version": "0.0.31",
4
4
  "author": "Alex Voronin <alex.varonin@gmail.com>",
5
5
  "license": "MIT",
6
6
  "peerDependencies": {
7
- "@angular/common": "^19.0.0",
8
- "@angular/core": "^19.0.0"
7
+ "@angular/common": "^20.0.0",
8
+ "@angular/core": "^20.0.0"
9
9
  },
10
10
  "description": "Angular library for easy image drawing on canvas",
11
11
  "dependencies": {
12
12
  "tslib": "^2.3.0"
13
13
  },
14
14
  "sideEffects": false,
15
+ "exports": {
16
+ ".": {
17
+ "types": "./index.d.ts",
18
+ "esm2022": "./esm2022/ngx-easy-image-drawing.mjs",
19
+ "default": "./fesm2022/ngx-easy-image-drawing.mjs"
20
+ },
21
+ "./package.json": {
22
+ "default": "./package.json"
23
+ }
24
+ },
15
25
  "module": "fesm2022/ngx-easy-image-drawing.mjs",
16
26
  "typings": "index.d.ts",
17
27
  "repository": {
@@ -24,14 +34,5 @@
24
34
  "canvas",
25
35
  "angular",
26
36
  "ngx"
27
- ],
28
- "exports": {
29
- "./package.json": {
30
- "default": "./package.json"
31
- },
32
- ".": {
33
- "types": "./index.d.ts",
34
- "default": "./fesm2022/ngx-easy-image-drawing.mjs"
35
- }
36
- }
37
+ ]
37
38
  }
package/lib/easy-image-drawing.component.d.ts DELETED
@@ -1,42 +0,0 @@
1
- import { ElementRef, AfterViewInit, OnDestroy, OnChanges, Renderer2, SimpleChanges } from "@angular/core";
2
- import * as i0 from "@angular/core";
3
- export declare class EasyImageDrawing implements OnChanges, AfterViewInit, OnDestroy {
4
- private renderer;
5
- width: import("@angular/core").InputSignal<number>;
6
- height: import("@angular/core").InputSignal<number>;
7
- src: import("@angular/core").InputSignal<string>;
8
- saveButtonColor: import("@angular/core").InputSignal<string>;
9
- undoButtonColor: import("@angular/core").InputSignal<string>;
10
- showColorPicker: import("@angular/core").InputSignal<boolean>;
11
- showlineWidthPicker: import("@angular/core").InputSignal<boolean>;
12
- savedImage: import("@angular/core").OutputEmitterRef<File>;
13
- canvas: ElementRef<HTMLCanvasElement>;
14
- context: CanvasRenderingContext2D;
15
- private lineWidth;
16
- private lineColor;
17
- private previousPosition;
18
- private activePath;
19
- private eventListeners;
20
- constructor(renderer: Renderer2);
21
- ngAfterViewInit(): void;
22
- ngOnChanges(changes: SimpleChanges): void;
23
- save(): void;
24
- clear(): void;
25
- onColorSelected(color: string): void;
26
- onLineWidthChanged(event: any): void;
27
- private _dataURItoBlob;
28
- private _drawLine;
29
- private getPosition;
30
- private _setCanvas;
31
- private _setMouseEvents;
32
- private _onMouseDown;
33
- private _onMouseMove;
34
- private _onMouseUp;
35
- private _setMouseEventsMobile;
36
- private _onTouchStart;
37
- private _onTouchMove;
38
- private _onTouchEnd;
39
- ngOnDestroy(): void;
40
- static ɵfac: i0.ɵɵFactoryDeclaration<EasyImageDrawing, never>;
41
- static ɵcmp: i0.ɵɵComponentDeclaration<EasyImageDrawing, "easy-image-drawing", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "saveButtonColor": { "alias": "saveButtonColor"; "required": false; "isSignal": true; }; "undoButtonColor": { "alias": "undoButtonColor"; "required": false; "isSignal": true; }; "showColorPicker": { "alias": "showColorPicker"; "required": false; "isSignal": true; }; "showlineWidthPicker": { "alias": "showlineWidthPicker"; "required": false; "isSignal": true; }; }, { "savedImage": "savedImage"; }, never, never, true, never>;
42
- }
package/public-api.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from "./lib/easy-image-drawing.component";