ngx-easy-image-drawing 0.0.24 → 0.0.26

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.
@@ -1,5 +1,5 @@
1
1
  /*
2
2
  * Public API Surface of ngx-easy-image-drawing
3
3
  */
4
- export * from './lib/easy-image-drawing.component';
5
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1lYXN5LWltYWdlLWRyYXdpbmcvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLG9DQUFvQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcclxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIG5neC1lYXN5LWltYWdlLWRyYXdpbmdcclxuICovXHJcblxyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9lYXN5LWltYWdlLWRyYXdpbmcuY29tcG9uZW50JztcclxuIl19
4
+ export * from "./lib/easy-image-drawing.component";
5
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1lYXN5LWltYWdlLWRyYXdpbmcvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLG9DQUFvQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcclxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIG5neC1lYXN5LWltYWdlLWRyYXdpbmdcclxuICovXHJcblxyXG5leHBvcnQgKiBmcm9tIFwiLi9saWIvZWFzeS1pbWFnZS1kcmF3aW5nLmNvbXBvbmVudFwiO1xyXG4iXX0=
@@ -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 Input,\r\n Output,\r\n EventEmitter,\r\n OnDestroy,\r\n OnChanges,\r\n} from \"@angular/core\";\r\n\r\n@Component({\r\n selector: \"easy-image-drawing\",\r\n standalone: true,\r\n imports: [],\r\n templateUrl: \"./easy-image-drawing.component.html\",\r\n styleUrls: [\"./easy-image-drawing.component.scss\"],\r\n})\r\nexport class EasyImageDrawing implements OnChanges, AfterViewInit, OnDestroy {\r\n @Input() width: number = 500;\r\n @Input() height: number = 500;\r\n @Input() lineWidth = 7;\r\n @Input() lineColor = \"#000000\";\r\n @Input() src = \"\";\r\n @Input() saveButtonColor = \"#4caf50\";\r\n @Input() undoButtonColor = \"#f44336\";\r\n @Output() savedImage = new EventEmitter<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 private previousPosition: { x: number; y: number } = { x: 0, y: 0 };\r\n private activePath = false;\r\n\r\n private _mousedown: any = null;\r\n private _mousemove: any = null;\r\n private _mouseup: any = null;\r\n\r\n private _touchstart: any = null;\r\n private _touchmove: any = null;\r\n private _touchend: any = null;\r\n\r\n ngOnChanges(): void {\r\n this._setCanvas();\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n this._setCanvas();\r\n this._setMouseEvents();\r\n this._setMouseEventsMobile();\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.next(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 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: any): 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 this.context = this.canvas.nativeElement.getContext(\"2d\")!;\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._mousedown = window.addEventListener(\r\n \"mousedown\",\r\n (event: MouseEvent) => {\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\r\n this._mousemove = window.addEventListener(\"mousemove\", (event) => {\r\n if (this.activePath) {\r\n this._drawLine(event);\r\n }\r\n });\r\n\r\n this._mouseup = window.addEventListener(\"mouseup\", () => {\r\n if (this.activePath) {\r\n this.context.closePath();\r\n this.activePath = false;\r\n }\r\n });\r\n }\r\n\r\n private _setMouseEventsMobile(): void {\r\n this._touchstart = window.addEventListener(\r\n \"touchstart\",\r\n (event: TouchEvent) => {\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\r\n this._touchmove = window.addEventListener(\"touchmove\", (event) => {\r\n if (this.activePath) {\r\n this._drawLine(event.touches[0]);\r\n }\r\n });\r\n\r\n this._touchend = window.addEventListener(\"touchend\", () => {\r\n if (this.activePath) {\r\n this.context.closePath();\r\n this.activePath = false;\r\n }\r\n });\r\n }\r\n\r\n private _removeEventListeners(): void {\r\n window.removeEventListener(\"mousedown\", this._mousedown);\r\n window.removeEventListener(\"mousemove\", this._mousemove);\r\n window.removeEventListener(\"mouseup\", this._mouseup);\r\n window.removeEventListener(\"touchstart\", this._touchstart);\r\n window.removeEventListener(\"touchmove\", this._touchmove);\r\n window.removeEventListener(\"touchend\", this._touchend);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this._removeEventListeners();\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","/*\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 Input,\r\n Output,\r\n EventEmitter,\r\n OnDestroy,\r\n OnChanges,\r\n} from \"@angular/core\";\r\n\r\n@Component({\r\n selector: \"easy-image-drawing\",\r\n standalone: true,\r\n imports: [],\r\n templateUrl: \"./easy-image-drawing.component.html\",\r\n styleUrls: [\"./easy-image-drawing.component.scss\"],\r\n})\r\nexport class EasyImageDrawing implements OnChanges, AfterViewInit, OnDestroy {\r\n @Input() width: number = 500;\r\n @Input() height: number = 500;\r\n @Input() lineWidth = 7;\r\n @Input() lineColor = \"#000000\";\r\n @Input() src = \"\";\r\n @Input() saveButtonColor = \"#4caf50\";\r\n @Input() undoButtonColor = \"#f44336\";\r\n @Output() savedImage = new EventEmitter<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 private previousPosition: { x: number; y: number } = { x: 0, y: 0 };\r\n private activePath = false;\r\n\r\n private _mousedown: any = null;\r\n private _mousemove: any = null;\r\n private _mouseup: any = null;\r\n\r\n private _touchstart: any = null;\r\n private _touchmove: any = null;\r\n private _touchend: any = null;\r\n\r\n ngOnChanges(): void {\r\n this._setCanvas();\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n this._setCanvas();\r\n this._setMouseEvents();\r\n this._setMouseEventsMobile();\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.next(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 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: any): 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 this.context = this.canvas.nativeElement.getContext(\"2d\")!;\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._mousedown = window.addEventListener(\r\n \"mousedown\",\r\n (event: MouseEvent) => {\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\r\n this._mousemove = window.addEventListener(\"mousemove\", (event) => {\r\n if (this.activePath) {\r\n this._drawLine(event);\r\n }\r\n });\r\n\r\n this._mouseup = window.addEventListener(\"mouseup\", () => {\r\n if (this.activePath) {\r\n this.context.closePath();\r\n this.activePath = false;\r\n }\r\n });\r\n }\r\n\r\n private _setMouseEventsMobile(): void {\r\n this._touchstart = window.addEventListener(\r\n \"touchstart\",\r\n (event: TouchEvent) => {\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\r\n this._touchmove = window.addEventListener(\"touchmove\", (event) => {\r\n if (this.activePath) {\r\n this._drawLine(event.touches[0]);\r\n }\r\n });\r\n\r\n this._touchend = window.addEventListener(\"touchend\", () => {\r\n if (this.activePath) {\r\n this.context.closePath();\r\n this.activePath = false;\r\n }\r\n });\r\n }\r\n\r\n private _removeEventListeners(): void {\r\n window.removeEventListener(\"mousedown\", this._mousedown);\r\n window.removeEventListener(\"mousemove\", this._mousemove);\r\n window.removeEventListener(\"mouseup\", this._mouseup);\r\n window.removeEventListener(\"touchstart\", this._touchstart);\r\n window.removeEventListener(\"touchmove\", this._touchmove);\r\n window.removeEventListener(\"touchend\", this._touchend);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this._removeEventListeners();\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","/*\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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ngx-easy-image-drawing",
3
- "version": "0.0.24",
3
+ "version": "0.0.26",
4
4
  "author": "Alex Voronin <alex.varonin@gmail.com>",
5
5
  "license": "MIT",
6
6
  "peerDependencies": {
package/public-api.d.ts CHANGED
@@ -1 +1 @@
1
- export * from './lib/easy-image-drawing.component';
1
+ export * from "./lib/easy-image-drawing.component";