lib-sketch-tool
Version:
3 lines (2 loc) • 29 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("fabric"),require("ionic-angular")):"function"==typeof define&&define.amd?define("lib-sketch-tool",["exports","@angular/core","fabric","ionic-angular"],e):e(t["lib-sketch-tool"]={},t.ng.core,t.fabric,t.ionicAngular)}(this,function(t,n,l,e){"use strict";function p(t){var e="function"==typeof Symbol&&t[Symbol.iterator],n=0;return e?e.call(t):{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}}}var o=function(){function t(){this.mouseUp=new n.EventEmitter,this.mouseDown=new n.EventEmitter,this.mouseMove=new n.EventEmitter}return t.prototype.onMouseUp=function(t){this.mouseUp.emit(t)},t.prototype.onMouseDown=function(t){this.mouseDown.emit(t)},t.prototype.onMouseMouve=function(t){this.mouseMove.emit(t)},t}();o.decorators=[{type:n.Directive,args:[{selector:"[libCanvasClick]"}]}],o.propDecorators={mouseUp:[{type:n.Output}],mouseDown:[{type:n.Output}],mouseMove:[{type:n.Output}],onMouseUp:[{type:n.HostListener,args:["mouseup",["$event"]]}],onMouseDown:[{type:n.HostListener,args:["mousedown",["$event"]]}],onMouseMouve:[{type:n.HostListener,args:["mousemove",["$event"]]}]};var a={Rectangle:0,Circle:1,Triangle:2,Line:3,Cross:4};a[a.Rectangle]="Rectangle",a[a.Circle]="Circle",a[a.Triangle]="Triangle",a[a.Line]="Line",a[a.Cross]="Cross";var i=50,r=50,s=50,c=50,d=25,u=3,h=10,g=function(){function t(){this.emptyCanvas(),this.mouse=[0,0],this.pos=[0,0]}return Object.defineProperty(t.prototype,"backgroundImage",{get:function(){return this.canvas},enumerable:!0,configurable:!0}),t.prototype.emptyCanvas=function(){this.canvas&&this.canvas.dispose(),this.canvas=new l.fabric.Canvas("canvas"),this.canvas.clear(),this.canvas.remove(this.canvas.getObjects())},t.prototype.loadNewImage=function(t){this.emptyCanvas(),t&&this.setBackgroundFromURL(t)},t.prototype.renderCanvas=function(){this.markSelectedObjectsDirty(),this.canvas.renderAll()},t.prototype.addGeometricShape=function(t,e,n){switch(n){case a.Rectangle:this.addRectangle(t,e);break;case a.Circle:this.addCircle(t,e);break;case a.Triangle:this.addTriangle(t,e);break;case a.Line:this.addHorizontalLine(t,e);break;case a.Cross:this.addCross(t,e)}},t.prototype.addRectangle=function(t,e){this.canvas.add(new l.fabric.Rect({width:i,height:r,left:s,top:c,fill:e,stroke:t,strokeWidth:u}))},t.prototype.addCircle=function(t,e){this.canvas.add(new l.fabric.Circle({left:s,top:c,radius:d,stroke:t,strokeWidth:u,fill:e}))},t.prototype.addTriangle=function(t,e){this.canvas.add(new l.fabric.Triangle({width:i,height:r,left:s,top:c,fill:e,stroke:t,strokeWidth:u}))},t.prototype.addHorizontalLine=function(t,e){this.canvas.add(this.createHorizontalLine(t))},t.prototype.createHorizontalLine=function(t){var e=new l.fabric.Line([100,150,200,150],{left:50,top:100,stroke:t,strokeWidth:5});return e.setControlsVisibility({bl:!1,br:!1,tl:!1,tr:!1,mt:!1,mb:!1}),e},t.prototype.createVerticalLine=function(t){var e=new l.fabric.Line([150,100,150,200],{left:100,top:50,stroke:t,strokeWidth:5});return e.setControlsVisibility({bl:!1,br:!1,tl:!1,tr:!1,ml:!1,mr:!1}),e},t.prototype.addCross=function(t,e){var n=this.createHorizontalLine(t),o=this.createVerticalLine(t);this.canvas.add(n),this.canvas.add(o)},t.prototype.toggleFreeDrawing=function(){this.canvas.isDrawingMode=!this.canvas.isDrawingMode},t.prototype.setFreeDrawingBrushColor=function(t){this.canvas.freeDrawingBrush.color=t,this.canvas.freeDrawingBrush.width=h},t.prototype.addText=function(t,e){var n=new l.fabric.IText(e,{fontFamily:"arial black",fontStyle:"bold",left:s,top:c});n.setColor(t),this.canvas.add(n),this.selectLastObject()},t.prototype.addImage=function(e){var i=this;return new Promise(function(n,t){var o=i.canvas,a=new Image;a.onload=function(t){var e=new l.fabric.Image(a,{angle:0,width:a.width,height:a.height,left:s,top:c,scaleX:1,scaleY:1});o.add(e),n()},a.src=e})},t.prototype.setBackgroundFromURL=function(e){var a=this.canvas,i=this.resizeCanvasAndComputeScaleFactor;return new Promise(function(n,t){if(null==e)return t();var o=new Image;o.onload=function(){var t=new l.fabric.Image(o,{}),e=i(t,a);a.setBackgroundImage(t,a.renderAll.bind(a),{scaleX:e.scaleFactor,scaleY:e.scaleFactor}),a.renderAll(),n()},o.src=e})},t.prototype.resizeCanvasAndComputeScaleFactor=function(t,e){var n,o,a,i=e.getWidth(),r=e.getHeight();return i/r<=t.width/t.height?(a=i/t.width,n=0,o=-(t.height*a-r)/2):(a=r/t.height,o=0,n=-(t.width*a-i)/2),{scaleFactor:a,left:n,top:o}},t.prototype.changeSelectedObjectsFillColor=function(t){var e,n,o=this.canvas.getActiveObjects();if(o)try{for(var a=p(o),i=a.next();!i.done;i=a.next()){i.value.setColor(t),this.canvas.renderAll()}}catch(r){e={error:r}}finally{try{i&&!i.done&&(n=a["return"])&&n.call(a)}finally{if(e)throw e.error}}},t.prototype.changeSelectedObjectsStrokeColor=function(t){var e,n,o=this.canvas.getActiveObjects();if(o){try{for(var a=p(o),i=a.next();!i.done;i=a.next()){var r=i.value;"i-text"===r.type?r.setColor(t):(r.stroke=t,r.set("dirty",!0))}}catch(s){e={error:s}}finally{try{i&&!i.done&&(n=a["return"])&&n.call(a)}finally{if(e)throw e.error}}this.canvas.renderAll()}},t.prototype.deleteSelectedObjects=function(){var t,e,n=this.canvas.getActiveObjects();if(n){try{for(var o=p(n),a=o.next();!a.done;a=o.next()){var i=a.value;this.canvas.remove(i)}}catch(r){t={error:r}}finally{try{a&&!a.done&&(e=o["return"])&&e.call(o)}finally{if(t)throw t.error}}this.canvas.discardActiveObject(),this.canvas.renderAll()}},t.prototype.bringSelectedObjectsToFront=function(){var t,e,n=this.canvas.getActiveObjects();if(n)try{for(var o=p(n),a=o.next();!a.done;a=o.next()){var i=a.value;this.canvas.bringToFront(i)}}catch(r){t={error:r}}finally{try{a&&!a.done&&(e=o["return"])&&e.call(o)}finally{if(t)throw t.error}}},t.prototype.sendSelectedObjectsToBack=function(){var t,e,n=this.canvas.getActiveObjects();if(n)try{for(var o=p(n),a=o.next();!a.done;a=o.next()){var i=a.value;this.canvas.sendToBack(i)}}catch(r){t={error:r}}finally{try{a&&!a.done&&(e=o["return"])&&e.call(o)}finally{if(t)throw t.error}}},t.prototype.exportImageAsDataURL=function(){return this.canvas.toDataURL("image/png")},Object.defineProperty(t.prototype,"canvasObjects",{get:function(){return this.canvas.getObjects()},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"canvasBackgroundImage",{get:function(){return this.canvas.backgroundImage},enumerable:!0,configurable:!0}),t.prototype.selectItem=function(t){this.canvas.setActiveObject(this.canvas.item(t))},Object.defineProperty(t.prototype,"activeObject",{get:function(){return this.canvas.getActiveObject()},enumerable:!0,configurable:!0}),t.prototype.getIndexOf=function(t){return this.canvas.getObjects().indexOf(t)},t.prototype.jsonFromCanvas=function(){return this.canvas.toJSON()},t.prototype.loadfromJson=function(n){var o=this;return new Promise(function(t,e){o.canvas.loadFromJSON(n,o.canvas.renderAll.bind(o.canvas)),t()})},t.prototype.selectLastObject=function(){var t=this.canvas.getObjects().length-1,e=this.canvas.item(t);this.canvas.setActiveObject(e),e.enterEditing()},t.prototype.markSelectedObjectsDirty=function(){var t,e,n=this.canvas.getActiveObjects();if(n)try{for(var o=p(n),a=o.next();!a.done;a=o.next()){a.value.set("dirty",!0)}}catch(i){t={error:i}}finally{try{a&&!a.done&&(e=o["return"])&&e.call(o)}finally{if(t)throw t.error}}},t.prototype.addSelectionRectangle=function(){this.cropRectangle=new l.fabric.Rect({fill:"transparent",originX:"left",originY:"top",stroke:"#ccc",strokeDashArray:[2,2],opacity:1,width:1,height:1}),this.cropRectangle.visible=!1,this.canvas.add(this.cropRectangle)},t.prototype.ajustCropRectanglFromMouse=function(t){var e=Math.min(t.layerX,this.mouse[0]),n=Math.min(t.layerY,this.mouse[1]),o=Math.abs(t.layerX-this.mouse[0]),a=Math.abs(t.layerY-this.mouse[1]);return!(!o||!a)&&(this.cropRectangle.set("top",n).set("left",e).set("width",o).set("height",a),this.canvas.renderAll(),!0)},t.prototype.startSelectingCropRectangleFromMouse=function(t){this.pos[0]=this.canvas.left,this.pos[1]=this.canvas.top,this.cropRectangle.left=t.layerX,this.cropRectangle.top=t.layerY,this.cropRectangle.setCoords(),this.mouse[0]=t.layerX,this.mouse[1]=t.layerY,this.canvas.renderAll(),this.cropRectangle.visible=!0,this.canvas.bringToFront(this.cropRectangle)},t.prototype.cropImage=function(){var t,e=this.cropRectangle.left,n=this.cropRectangle.top,o=this.cropRectangle.width,a=this.cropRectangle.height,i=document.getElementsByClassName("div-canvas-container")[0],r=i.clientWidth,s=i.clientHeight;t=r/s<=o/a?r/o:s/a,this.canvas.setWidth(o*t),this.canvas.setHeight(a*t),this.canvas.backgroundImage.scaleX*=t,this.canvas.backgroundImage.scaleY*=t,this.canvas.backgroundImage.left-=e,this.canvas.backgroundImage.left*=t,this.canvas.backgroundImage.top-=n-t,this.canvas.backgroundImage.top*=t,this.moveAllObjectsInCanvas(-1*e,-1*n,t),this.canvas.selectable=!0,this.canvas.selection=!0,this.cropRectangle.visible=!1,this.canvas.remove(this.cropRectangle),this.canvas.renderAll()},t.prototype.ajustCropRectangle=function(t){var e=t.touches[0],n=t.target.getBoundingClientRect(),o=Math.min(e.clientX-n.left,this.mouse[0]),a=Math.min(e.clientY-n.top,this.mouse[1]),i=Math.abs(e.clientX-n.left-this.mouse[0]),r=Math.abs(e.clientY-n.top-this.mouse[1]);return!(!i||!r)&&(this.cropRectangle.set("top",a).set("left",o).set("width",i).set("height",r),this.canvas.renderAll(),!0)},t.prototype.startSelectingCropRectangle=function(t){this.pos[0]=this.canvas.left,this.pos[1]=this.canvas.top;var e=t.touches[0],n=t.target.getBoundingClientRect();this.cropRectangle.left=e.clientX-n.left,this.cropRectangle.top=e.clientY-n.top,this.cropRectangle.setCoords(),this.mouse[0]=e.clientX-n.left,this.mouse[1]=e.clientY-n.top,this.canvas.renderAll(),this.cropRectangle.visible=!0,this.canvas.bringToFront(this.cropRectangle)},t.prototype.disableSelection=function(){this.canvas.selection=!1},t.prototype.moveAllObjectsInCanvas=function(t,e,n){var o,a,i=this.canvas.getObjects();try{for(var r=p(i),s=r.next();!s.done;s=r.next()){var c=s.value;c.left+=t,c.left*=n,c.scaleX*=n,c.top+=e,c.scaleY*=n,c.top*=n,c.setCoords()}}catch(l){o={error:l}}finally{try{s&&!s.done&&(a=r["return"])&&a.call(r)}finally{if(o)throw o.error}}},t.prototype.groupSelectedObjects=function(){var t,e,n=this.canvas.getActiveObjects();if(n){var o=[];try{for(var a=p(n),i=a.next();!i.done;i=a.next()){var r=i.value;o.push(r)}}catch(c){t={error:c}}finally{try{i&&!i.done&&(e=a["return"])&&e.call(a)}finally{if(t)throw t.error}}this.deleteSelectedObjects();var s=new l.fabric.Group(o);this.canvas.add(s),s.setCoords(),this.canvas.setActiveObject(s),this.canvas.renderAll()}},t}();g.decorators=[{type:n.Injectable}],g.ctorParameters=function(){return[]};var v=function(){function t(t,e){this.actionSheetCtrl=t,this.canvasManagerService=e,this.json=new n.EventEmitter,this.strokeColor="#000000",this.fillColor="#FF000000",this.isCropping=!1,this.isLoaded=!1,this.isUndoAvailable=!1,this.isSelectingColor=!1}return t.prototype.ngOnInit=function(){this.canvasManagerService.emptyCanvas(),null==this.loadedJson?this.canvasManagerService.setBackgroundFromURL(this.imageData):(this.previousJson=JSON.parse(this.loadedJson),this.currentJson=this.previousJson,this.canvasManagerService.loadfromJson(JSON.parse(this.loadedJson))),this.isLoaded=!0,this.previousImageData=this.imageData},t.prototype.ngOnChanges=function(){this.isLoaded&&this.previousImageData!==this.imageData&&(this.canvasManagerService.emptyCanvas(),this.canvasManagerService.setBackgroundFromURL(this.imageData),this.computeJson(),this.previousImageData=this.imageData)},Object.defineProperty(t.prototype,"hasPictograms",{get:function(){return!this.icons},enumerable:!0,configurable:!0}),t.prototype.addText=function(){this.canvasManagerService.addText(this.strokeColor," "),this.computeJson()},t.prototype.addShape=function(t){this.canvasManagerService.addGeometricShape(this.strokeColor,this.fillColor,a[t]),this.computeJson()},t.prototype.addImage=function(t){this.canvasManagerService.addImage(this.iconsPath+t),this.computeJson()},t.prototype.changeStrokeColor=function(){this.canvasManagerService.changeSelectedObjectsStrokeColor(this.strokeColor),this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor),this.computeJson()},t.prototype.bringFoward=function(){this.canvasManagerService.bringSelectedObjectsToFront()},t.prototype.sendToBack=function(){this.canvasManagerService.sendSelectedObjectsToBack()},t.prototype.saveImage=function(){var t=this.canvasManagerService.exportImageAsDataURL(),e=document.createElement("a");e.download="image",e.href=t,document.body.appendChild(e),e.click(),document.body.removeChild(e)},t.prototype.crop=function(){this.isCropping=!0,this.canvasManagerService.disableSelection(),this.canvasManagerService.addSelectionRectangle(),this.computeJson(),this.isUndoAvailable=!0},t.prototype.deleteSelection=function(){this.canvasManagerService.deleteSelectedObjects(),this.computeJson()},t.prototype.mouseUp=function(t){this.isCropping&&(this.isCropping=!1,this.canvasManagerService.cropImage()),this.computeJson()},t.prototype.mouseMove=function(t){this.isCropping&&this.canvasManagerService.ajustCropRectangle(t)},t.prototype.mouseDown=function(t){this.isCropping&&this.canvasManagerService.startSelectingCropRectangle(t)},t.prototype.group=function(){this.canvasManagerService.groupSelectedObjects()},t.prototype.undo=function(){var t=this;this.canvasManagerService.loadfromJson(this.previousJson).then(function(){t.computeJson()})},t.prototype.computeJson=function(){this.previousJson=this.currentJson,this.currentJson=this.canvasManagerService.jsonFromCanvas(),this.json.emit(JSON.stringify(this.currentJson)),this.isUndoAvailable=!1},t.prototype.presentShapeActionSheet=function(){var t=this;this.actionSheetCtrl.create({title:"Ajouter une forme",buttons:[{text:" Rectangle",handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,a.Rectangle)}},{text:" Triangle",handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,a.Triangle)}},{text:" Cercle",handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,a.Circle)}},{text:" Ligne",handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,a.Line)}},{text:" Croix",handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,a.Cross)}},{text:" Texte",handler:function(){t.canvasManagerService.addText(t.strokeColor,"")}}]}).present()},t.prototype.presentEditActionSheet=function(){var t=this;this.actionSheetCtrl.create({title:"Édition",buttons:[{text:" Rogner",handler:function(){t.crop()}},{text:" Grouper",handler:function(){t.group()}},{text:" Avancer",handler:function(){t.bringFoward()}},{text:" Reculer",handler:function(){t.sendToBack()}},{text:" Supprimer",handler:function(){t.deleteSelection()}}]}).present()},t.prototype.presentPictogramsActionSheet=function(){for(var n=this,o=[],a=[],i=this.icons,t=function(t){var e=document.createElement("style");e.type="text/css",e.innerHTML=".customCSSClass"+t+"{background: url('"+r.iconsPath+i[t]+"') no-repeat !important;padding-left:50px !important;height:80px; background-position: left center !important;}",document.getElementsByTagName("head")[0].appendChild(e),a.push(e),o.push({role:"destructive",text:i[t],cssClass:"customCSSClass"+t,handler:function(){n.addImage(i[t])}})},r=this,e=0;e<i.length;e++)t(e);var s=this.actionSheetCtrl.create({title:"Ajouter un pictogramme",buttons:o});s.onDidDismiss(function(){for(var t=0;t<a.length;t++)null!=a[t].parentNode&&a[t].parentNode.removeChild(a[t])}),s.present()},t.prototype.onColorClicked=function(){this.isSelectingColor=!0},t.prototype.setColor=function(t){this.strokeColor=t,this.changeStrokeColor(),this.isSelectingColor=!1},t}();v.decorators=[{type:n.Component,args:[{selector:"lib-mobile-sketch-tool",template:'<div\n class="div-canvas-container"\n (touchstart)="mouseDown($event)"\n (touchmove)="mouseMove($event)"\n (touchend)="mouseUp($event)"\n (mousedown)="mouseDown($event)"\n (mousemove)="mouseMove($event)"\n (mouseup)="mouseUp($event)"\n>\n <canvas id="canvas" width="680" height="680"></canvas>\n\n\n <div class="color-picker" *ngIf="isSelectingColor">\n <ion-grid>\n <ion-row></ion-row>\n <ion-row></ion-row>\n <ion-row>\n <ion-col style="background:#660000" (tap)="setColor(\'#660000\')"> </ion-col>\n <ion-col style="background:#663300" (tap)="setColor(\'#663300\')"> </ion-col>\n <ion-col style="background:#666600" (tap)="setColor(\'#666600\')"> </ion-col>\n <ion-col style="background:#006600" (tap)="setColor(\'#006600\')"> </ion-col>\n <ion-col style="background:#000066" (tap)="setColor(\'#000066\')"> </ion-col>\n <ion-col style="background:#660066" (tap)="setColor(\'#660066\')"> </ion-col>\n <ion-col style="background:#000000" (tap)="setColor(\'#000000\')"> </ion-col>\n </ion-row>\n <ion-row>\n <ion-col style="background:#CC0000" (tap)="setColor(\'#CC0000\')"> </ion-col>\n <ion-col style="background:#CC6600" (tap)="setColor(\'#CC6600\')"> </ion-col>\n <ion-col style="background:#CCCC00" (tap)="setColor(\'#CCCC00\')"> </ion-col>\n <ion-col style="background:#00CC00" (tap)="setColor(\'#00CC00\')"> </ion-col>\n <ion-col style="background:#0000CC" (tap)="setColor(\'#0000CC\')"> </ion-col>\n <ion-col style="background:#CC00CC" (tap)="setColor(\'#CC00CC\')"> </ion-col>\n <ion-col style="background:#606060" (tap)="setColor(\'#606060\')"> </ion-col>\n </ion-row>\n <ion-row>\n <ion-col style="background:#FF0000" (tap)="setColor(\'#FF0000\')"> </ion-col>\n <ion-col style="background:#FF8000" (tap)="setColor(\'#FF8000\')"> </ion-col>\n <ion-col style="background:#FFFF00" (tap)="setColor(\'#FFFF00\')"> </ion-col>\n <ion-col style="background:#00FF00" (tap)="setColor(\'#00FF00\')"> </ion-col>\n <ion-col style="background:#0000FF" (tap)="setColor(\'#0000FF\')"> </ion-col>\n <ion-col style="background:#FF00FF" (tap)="setColor(\'#FF00FF\')"> </ion-col>\n <ion-col style="background:#808080" (tap)="setColor(\'#808080\')"> </ion-col>\n </ion-row>\n <ion-row>\n <ion-col style="background:#FF6666" (tap)="setColor(\'#FF6666\')"> </ion-col>\n <ion-col style="background:#FFB266" (tap)="setColor(\'#FFB266\')"> </ion-col>\n <ion-col style="background:#FFFF66" (tap)="setColor(\'#FFFF66\')"> </ion-col>\n <ion-col style="background:#66FF66" (tap)="setColor(\'#66FF66\')"> </ion-col>\n <ion-col style="background:#6666FF" (tap)="setColor(\'#6666FF\')"> </ion-col>\n <ion-col style="background:#FF66FF" (tap)="setColor(\'#FF66FF\')"> </ion-col>\n <ion-col style="background:#C0C0C0" (tap)="setColor(\'#C0C0C0\')"> </ion-col>\n </ion-row>\n <ion-row>\n <ion-col style="background:#FF9999" (tap)="setColor(\'#FF9999\')"> </ion-col>\n <ion-col style="background:#FFCC99" (tap)="setColor(\'#FFCC99\')"> </ion-col>\n <ion-col style="background:#FFFF99" (tap)="setColor(\'#FFFF99\')"> </ion-col>\n <ion-col style="background:#99FF99" (tap)="setColor(\'#99FF99\')"> </ion-col>\n <ion-col style="background:#9999FF" (tap)="setColor(\'#9999FF\')"> </ion-col>\n <ion-col style="background:#FF99FF" (tap)="setColor(\'#FF99FF\')"> </ion-col>\n <ion-col style="background:#FFFFFF" (tap)="setColor(\'#FFFFFF\')"> </ion-col>\n </ion-row>\n </ion-grid>\n </div>\n</div>\n\n<ion-toolbar>\n <div class="div-edit-toolbar">\n <button\n ion-button\n large\n [clear]="true"\n (click)="presentShapeActionSheet()"\n >\n <i\n class="fa fa-square"\n id="icon"\n ></i>\n </button>\n\n <button\n ion-button\n large\n [clear]="true"\n (click)="presentPictogramsActionSheet()"\n >\n <i\n class="fa fa-image"\n id="icon"\n ></i>\n </button>\n\n <button\n ion-button\n large\n [clear]="true"\n (click)="presentEditActionSheet()"\n >\n <i\n class="fa fa-edit"\n id="icon"\n ></i>\n </button>\n\n <button\n ion-button\n large\n [clear]="true"\n (click)="onColorClicked()"\n >\n <i\n class="fa fa-paint-brush"\n id="icon"\n ></i>\n </button>\n\n <button\n ion-button\n large\n [clear]="true"\n (click)="undo()"\n *ngIf="isUndoAvailable"\n >\n <i\n class="fa fa-undo"\n id="icon"\n ></i>\n </button>\n\n </div>\n\n</ion-toolbar>\n',styles:[".div-canvas-container{width:100%!important;height:80%!important;margin:0 auto;text-align:center}canvas{padding:0;margin:auto;display:block;display:-webkit-box;display:-ms-flexbox;display:flex}.edit-bar{position:absolute;width:100%}.div-edit-toolbar{-ms-flex-line-pack:center!important;align-content:center!important;text-align:center;vertical-align:center}.action-sheet-button{font-family:FontAwesome,Arial!important;text-align:left,right!important}.color-picker{width:100%;height:40%;bottom:0;left:0;position:absolute}#icon{color:#b32017}"],providers:[g]}]}],v.ctorParameters=function(){return[{type:e.ActionSheetController},{type:g}]},v.propDecorators={imageData:[{type:n.Input}],loadedJson:[{type:n.Input}],iconsPath:[{type:n.Input}],icons:[{type:n.Input}],json:[{type:n.Output}]};var f={DELETE:46,BACKSPACE:8};f[f.DELETE]="DELETE",f[f.BACKSPACE]="BACKSPACE";var b=function(){function t(t){this.canvasManagerService=t,this.availableGeometricShapes=a,this.strokeColor="#000000",this.isDrawing=!1,this.isCropping=!1,this.isLastImage=!1}return t.prototype.ngOnInit=function(){this.canvasManagerService.emptyCanvas(),this.canvasManagerService.setBackgroundFromURL(this.imgUrl),this.isDrawing=!1},t.prototype.addText=function(){this.canvasManagerService.addText(this.strokeColor," ")},t.prototype.addShape=function(t){this.canvasManagerService.addGeometricShape(this.strokeColor,this.fillColor,a[t])},t.prototype.addImage=function(t){this.isDrawing},t.prototype.changeFillColor=function(){this.canvasManagerService.changeSelectedObjectsFillColor(this.fillColor)},t.prototype.changeStrokeColor=function(){this.canvasManagerService.changeSelectedObjectsStrokeColor(this.strokeColor),this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor)},t.prototype.bringFoward=function(){this.canvasManagerService.bringSelectedObjectsToFront()},t.prototype.sendToBack=function(){this.canvasManagerService.sendSelectedObjectsToBack()},t.prototype.draw=function(){this.isDrawing=!this.isDrawing,this.canvasManagerService.toggleFreeDrawing(),this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor)},t.prototype.saveImage=function(){var t=this.canvasManagerService.exportImageAsDataURL(),e=document.createElement("a");e.download="image",e.href=t,document.body.appendChild(e),e.click(),document.body.removeChild(e)},t.prototype.crop=function(){this.isCropping=!0,this.canvasManagerService.disableSelection(),this.canvasManagerService.addSelectionRectangle()},t.prototype.keyEvent=function(t){t.keyCode===f.DELETE&&this.deleteSelection()},t.prototype.deleteSelection=function(){this.canvasManagerService.deleteSelectedObjects()},t.prototype.mouseUp=function(t){this.isCropping&&(this.canvasManagerService.cropImage(),this.isCropping=!1)},t.prototype.mouseMove=function(t){this.isCropping&&this.canvasManagerService.ajustCropRectangle(t)},t.prototype.mouseDown=function(t){this.isCropping&&this.canvasManagerService.startSelectingCropRectangle(t)},t.prototype.group=function(){this.canvasManagerService.groupSelectedObjects()},t}();b.decorators=[{type:n.Component,args:[{selector:"lib-web-sketch-tool",template:'<head>\n <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\n</head>\n\n<div class="row">\n <div class="column">\n <form>\n <button\n color="accent"\n (click)="crop()"\n [disabled]="isDrawing"\n >\n <i class="fa fa-crop"></i>\n </button>\n\n <button\n (click)="addShape(\'Rectangle\')"\n [disabled]="isDrawing"\n >\n <i class="fa fa-square"></i>\n </button>\n\n <button\n (click)="addShape(\'Circle\')"\n [disabled]="isDrawing"\n >\n <i class="fa fa-circle"></i>\n </button>\n\n <button\n (click)="addShape(\'Line\')"\n [disabled]="isDrawing"\n >\n <i class="fa fa-minus"></i>\n </button>\n\n <button\n (click)="addText()"\n [disabled]="isDrawing"\n >\n <i class="fa fa-font"></i>\n </button>\n\n <button\n color="accent"\n (click)="bringFoward()"\n [disabled]="isDrawing"\n >\n <i class="fa fa-angle-up"></i>\n </button>\n\n <div class="separator"></div>\n\n <button (click)="saveImage()">\n <i class="fa fa-download"></i>\n </button>\n\n </form>\n </div>\n\n <div class="column">\n <form>\n <button (click)="draw()">\n <i class="fa fa-pencil"></i>\n </button>\n\n <button\n (click)="addShape(\'Triangle\')"\n [disabled]="isDrawing"\n >\n <i class="fa fa-caret-up"></i>\n </button>\n\n <button\n (click)="group()"\n [disabled]="isDrawing"\n >\n <i class="fa fa-object-group"></i>\n </button>\n\n <button\n (click)="addShape(\'Cross\')"\n [disabled]="isDrawing"\n >\n <i class="fa fa-plus"></i>\n </button>\n\n <button\n (click)="deleteSelection()"\n [disabled]="isDrawing"\n >\n <i class="fa fa-trash"></i>\n </button>\n\n <button\n color="accent"\n (click)="sendToBack()"\n [disabled]="isDrawing"\n >\n <i class="fa fa-angle-down"></i>\n </button>\n\n\n <div class="separator"></div>\n\n </form>\n </div>\n\n <div\n class="column"\n appCanvasDirective\n (mouseDown)="mouseDown($event)"\n (mouseMove)="mouseMove($event)"\n (mouseUp)="mouseUp($event)"\n >\n <canvas id="canvas"></canvas>\n </div>\n</div>\n',styles:['.toolbar-button{font-family:FontAwesome;display:inline-block;width:2em;min-width:0}.column{float:left;width:auto;padding-top:.5em;padding-left:.5em}.row:after{content:"";display:table;clear:both}form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}form button{width:40px;height:40px;margin:8px auto 0}ul{padding:0;margin:0}li{list-style-type:none;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;text-decoration:none;float:left;padding:1px}img{width:40px;height:40px;padding:1px;border:1px solid #ddd;border-radius:4px}.separator{padding:10px}i{font-size:1.5em}'],providers:[g]}]}],b.ctorParameters=function(){return[{type:g}]},b.propDecorators={imgUrl:[{type:n.Input}],keyEvent:[{type:n.HostListener,args:["window:keyup",["$event"]]}]},t.ɵa=o,t.ɵd=v,t.ɵc=g,t.ɵb=b,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=lib-sketch-tool.umd.min.js.map