| 1 | !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("fabric"),require("ionic-angular"),require("ionic-angular/gestures/gesture"),require("@ngx-translate/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("lib-sketch-tool",["exports","@angular/core","fabric","ionic-angular","ionic-angular/gestures/gesture","@ngx-translate/core","@angular/common"],n):n(t["lib-sketch-tool"]={},t.ng.core,null,null,null,null,t.ng.common)}(this,function(t,o,l,n,e,a,i){"use strict";var r={Rectangle:0,Circle:1,Triangle:2,Line:3,Cross:4};function h(t){var n="function"==typeof Symbol&&t[Symbol.iterator],e=0;return n?n.call(t):{next:function(){return t&&e>=t.length&&(t=void 0),{value:t&&t[e++],done:!t}}}}r[r.Rectangle]="Rectangle",r[r.Circle]="Circle",r[r.Triangle]="Triangle",r[r.Line]="Line",r[r.Cross]="Cross";var s=200,c=200,p=50,d=50,u=100,v=10,g=10,f=20,y=function(){function t(){this.emptyCanvas(),this.mousePosition={x:0,y:0},this.cropStartingPosition={x:0,y:0},this.canvas.freeDrawingBrush.width=g}return Object.defineProperty(t.prototype,"backgroundImage",{get:function(){return this.canvas},enumerable:!0,configurable:!0}),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}),Object.defineProperty(t.prototype,"activeObject",{get:function(){return this.canvas.getActiveObject()},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"activeGroup",{get:function(){return this.canvas.getActiveObjects()},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,n,e){switch(e){case r.Rectangle:this.addRectangle(t,n);break;case r.Circle:this.addCircle(t,n);break;case r.Triangle:this.addTriangle(t,n);break;case r.Line:this.addHorizontalLine(t,n);break;case r.Cross:this.addCross(t,n)}},t.prototype.addRectangle=function(t,n){this.canvas.add(new l.fabric.Rect({width:s,height:c,left:p,top:d,fill:n,stroke:t,strokeWidth:v,cornerSize:f}))},t.prototype.addCircle=function(t,n){this.canvas.add(new l.fabric.Circle({left:p,top:d,radius:u,stroke:t,strokeWidth:v,fill:n,cornerSize:f}))},t.prototype.addTriangle=function(t,n){this.canvas.add(new l.fabric.Triangle({width:s,height:c,left:p,top:d,fill:n,stroke:t,strokeWidth:v,cornerSize:f}))},t.prototype.addHorizontalLine=function(t,n){this.canvas.add(this.createHorizontalLine(t))},t.prototype.createHorizontalLine=function(t){var n=new l.fabric.Line([100,150,200,150],{left:50,top:100,stroke:t,strokeWidth:5,cornerSize:f});return n.setControlsVisibility({bl:!1,br:!1,tl:!1,tr:!1,mt:!1,mb:!1}),n},t.prototype.createVerticalLine=function(t){var n=new l.fabric.Line([150,100,150,200],{left:100,top:50,stroke:t,strokeWidth:5,cornerSize:f});return n.setControlsVisibility({bl:!1,br:!1,tl:!1,tr:!1,ml:!1,mr:!1}),n},t.prototype.addCross=function(t,n){var e=this.createHorizontalLine(t),o=this.createVerticalLine(t);this.canvas.add(e),this.canvas.add(o)},t.prototype.toggleFreeDrawing=function(){this.canvas.isDrawingMode=!this.canvas.isDrawingMode},t.prototype.setFreeDrawingBrushColor=function(t){this.canvas.freeDrawingBrush.color=t},Object.defineProperty(t.prototype,"freeDrawingBrushWidthFromZoom",{set:function(t){this.canvas.freeDrawingBrush.width=g*(1/t)},enumerable:!0,configurable:!0}),t.prototype.addText=function(t,n){var e=new l.fabric.IText("text",{fontFamily:"arial black",fontStyle:"bold",left:p,top:d,cornerSize:f});e.setColor(t),this.canvas.add(e)},t.prototype.addImage=function(n){var i=this;return new Promise(function(e,t){var o=i.canvas,a=new Image;a.onload=function(t){var n=new l.fabric.Image(a,{angle:0,width:a.width,height:a.height,left:p,top:d,scaleX:1,scaleY:1,cornerSize:f});o.add(n),e()},a.src=n})},t.prototype.setBackgroundFromURL=function(n){var a=this.canvas,i=this.resizeCanvasAndComputeScaleFactor;return new Promise(function(e,t){if(null==n)return t();var o=new Image;o.onload=function(){var t=new l.fabric.Image(o,{}),n=i(t,a);a.setBackgroundImage(t,a.renderAll.bind(a),{scaleX:n.scaleFactor,scaleY:n.scaleFactor}),a.renderAll(),e()},o.src=n})},t.prototype.resizeCanvasAndComputeScaleFactor=function(t,n){var e=document.getElementsByClassName("div-canvas-container")[0];n.setWidth(e.clientWidth),n.setHeight(e.clientHeight);var o,a,i,r=n.getWidth(),s=n.getHeight();return r/s<=t.width/t.height?(i=r/t.width,o=0,a=-(t.height*i-s)/2):(i=s/t.height,a=0,o=-(t.width*i-r)/2),{scaleFactor:i,left:o,top:a}},t.prototype.onOrientationChange=function(){this.mousePosition={x:this.canvas.getWidth,y:this.canvas.getHeight},this.cropImage()},t.prototype.changeSelectedObjectsFillColor=function(t){var n,e,o=this.canvas.getActiveObjects();if(o)try{for(var a=h(o),i=a.next();!i.done;i=a.next()){i.value.setColor(t),this.canvas.renderAll()}}catch(r){n={error:r}}finally{try{i&&!i.done&&(e=a["return"])&&e.call(a)}finally{if(n)throw n.error}}},t.prototype.changeSelectedObjectsStrokeColor=function(t){var n,e,o=this.canvas.getActiveObjects();if(o){try{for(var a=h(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){n={error:s}}finally{try{i&&!i.done&&(e=a["return"])&&e.call(a)}finally{if(n)throw n.error}}this.canvas.renderAll()}},t.prototype.deleteSelectedObjects=function(){var t,n,e=this.canvas.getActiveObjects();if(e){try{for(var o=h(e),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&&(n=o["return"])&&n.call(o)}finally{if(t)throw t.error}}this.canvas.discardActiveObject(),this.canvas.renderAll()}},t.prototype.bringSelectedObjectsToFront=function(){var t,n,e=this.canvas.getActiveObjects();if(e)try{for(var o=h(e),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&&(n=o["return"])&&n.call(o)}finally{if(t)throw t.error}}},t.prototype.sendSelectedObjectsToBack=function(){var t,n,e=this.canvas.getActiveObjects();if(e)try{for(var o=h(e),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&&(n=o["return"])&&n.call(o)}finally{if(t)throw t.error}}},t.prototype.jsonFromCanvas=function(){return this.canvas.toJSON()},t.prototype.loadfromJson=function(e){var o=this,t=document.getElementsByClassName("div-canvas-container")[0];return this.canvas.setWidth(t.clientWidth),this.canvas.setHeight(t.clientHeight),new Promise(function(t,n){o.adjustCanvas(e),o.canvas.loadFromJSON(e,o.canvas.renderAll.bind(o.canvas)),t()})},t.prototype.adjustCanvas=function(t){var n,e=t.backgroundImage,o=document.getElementsByClassName("div-canvas-container")[0],a=e.width,i=e.height,r=o.clientWidth,s=o.clientHeight,c=(n=r/s<=a/i?r/a:s/i)/e.scaleX;e.scaleX=n,e.scaleY=n,this.canvas.setWidth(a*n),this.canvas.setHeight(i*n);for(var l=t.objects,h=0;h<l.length;h++)l[h].left*=c,l[h].top*=c,l[h].scaleX*=c,l[h].scaleY*=c;this.canvas.selectable=!0,this.canvas.selection=!0,this.canvas.renderAll()},t.prototype.exportImageAsDataURL=function(){return this.canvas.toDataURL("image/png")},t.prototype.selectItem=function(t){this.canvas.setActiveObject(this.canvas.item(t))},t.prototype.getIndexOf=function(t){return this.canvas.getObjects().indexOf(t)},t.prototype.selectLastObject=function(){var t=this.canvas.getObjects().length-1,n=this.canvas.item(t);this.canvas.setActiveObject(n),n.enterEditing()},t.prototype.markSelectedObjectsDirty=function(){var t,n,e=this.canvas.getActiveObjects();if(e)try{for(var o=h(e),a=o.next();!a.done;a=o.next()){a.value.set("dirty",!0)}}catch(i){t={error:i}}finally{try{a&&!a.done&&(n=o["return"])&&n.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.ajustCropRectangleFromMouse=function(t){var n=Math.min(t.layerX,this.mousePosition.x),e=Math.min(t.layerY,this.mousePosition.y),o=Math.abs(t.layerX-this.mousePosition.x),a=Math.abs(t.layerY-this.mousePosition.y);return!(!o||!a)&&(this.cropRectangle.set("top",e).set("left",n).set("width",o).set("height",a),this.canvas.renderAll(),!0)},t.prototype.startSelectingCropRectangleFromMouse=function(t){this.cropStartingPosition={x:this.canvas.left,y:this.canvas.top},this.cropRectangle.left=t.layerX,this.cropRectangle.top=t.layerY,this.cropRectangle.setCoords(),this.mousePosition={x:t.layerX,y:t.layerY},this.canvas.renderAll(),this.cropRectangle.visible=!0,this.canvas.bringToFront(this.cropRectangle)},t.prototype.cropImage=function(){var t,n=this.cropRectangle.left,e=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-=n,this.canvas.backgroundImage.left*=t,this.canvas.backgroundImage.top-=e-t,this.canvas.backgroundImage.top*=t,this.moveAllObjectsInCanvas(-1*n,-1*e,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 n=t.touches[0],e=t.target.getBoundingClientRect(),o=Math.min(n.clientX-e.left,this.mousePosition.x),a=Math.min(n.clientY-e.top,this.mousePosition.y),i=Math.abs(n.clientX-e.left-this.mousePosition.x),r=Math.abs(n.clientY-e.top-this.mousePosition.y);return!(!i||!r)&&(this.cropRectangle.set("left",o).set("top",a).set("width",i).set("height",r),this.canvas.renderAll(),!0)},t.prototype.startSelectingCropRectangle=function(t){this.cropStartingPosition={x:this.canvas.left,y:this.canvas.top};var n=t.touches[0],e=t.target.getBoundingClientRect();this.cropRectangle.left=n.clientX-e.left,this.cropRectangle.top=n.clientY-e.top,this.cropRectangle.setCoords(),this.mousePosition={x:n.clientX-e.left,y:n.clientY-e.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,n,e){var o,a,i=this.canvas.getObjects();try{for(var r=h(i),s=r.next();!s.done;s=r.next()){var c=s.value;c.left+=t,c.left*=e,c.scaleX*=e,c.top+=n,c.scaleY*=e,c.top*=e,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,n,e=this.canvas.getActiveObjects();if(e){var o=[];try{for(var a=h(e),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&&(n=a["return"])&&n.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.prototype.setLastPanPosition=function(t){this.lastPanPosition=new l.fabric.Point(t.touches[0].clientX,t.touches[0].clientY)},t.prototype.panCanvas=function(t){var n=new l.fabric.Point(t.touches[0].clientX-this.lastPanPosition.x,t.touches[0].clientY-this.lastPanPosition.y);this.canvas.relativePan(n),this.preventPanOutsideCanvas(),this.canvas.renderAll(),this.setLastPanPosition(t)},t.prototype.preventPanOutsideCanvas=function(){var t=this.canvas.viewportTransform,n=(this.canvas.height,t[0],this.canvas.width,t[0],this.canvas.height*(t[0]-1));(0<=t[5]||-n>t[5])&&(t[5]=0<=t[5]?0:-n);var e=this.canvas.width*(t[0]-1);(0<=t[4]||-e>t[4])&&(t[4]=0<=t[4]?0:-e)},t.prototype.zoom=function(t){var n=new l.fabric.Point(t.center.x,t.center.y),e=this.canvas.getZoom();"pinchout"===t.additionalEvent&&(e*=1.05),"pinchin"===t.additionalEvent&&(e/=1.05),e<1?(e=1,this.canvas.zoomToPoint(new l.fabric.Point(0,0),e),this.canvas.absolutePan(new l.fabric.Point(0,0))):(10<e&&(e=10),this.canvas.zoomToPoint(n,e)),this.freeDrawingBrushWidthFromZoom(e),this.canvas.renderAll()},t.decorators=[{type:o.Injectable}],t.ctorParameters=function(){return[]},t}(),b=function(){function t(t,n,e){this.actionSheetCtrl=t,this.canvasManagerService=n,this.translate=e,this.canvas=new o.EventEmitter,this.strokeColor="#000000",this.fillColor="transparent",this.isCropping=!1,this.isLoaded=!1,this.isUndoAvailable=!1,this.isSelectingColor=!1}return t.prototype.ngOnInit=function(){this.imageData&&(this.canvasManagerService.emptyCanvas(),null==this.loadedJson||this.loadedJson.length<10?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),this.emitCanvas()},t.prototype.ngOnChanges=function(){this.isLoaded&&(null===this.loadedJson||this.loadedJson.length<10||this.imageData!==this.previousImageData?(this.canvasManagerService.emptyCanvas(),this.canvasManagerService.setBackgroundFromURL(this.imageData),this.previousImageData=this.imageData,this.currentJson=null):this.loadedJson!==JSON.stringify(this.currentJson)&&(this.previousJson=JSON.parse(this.loadedJson),this.currentJson=this.previousJson,this.canvasManagerService.loadfromJson(JSON.parse(this.loadedJson)))),this.emitCanvas()},t.prototype.ngAfterViewInit=function(){var n=this;this.gesture=new e.Gesture(this.element.nativeElement),this.gesture.listen(),this.gesture.on("pinch",function(t){return n.pinch(t)})},t.prototype.ngOnDestroy=function(){this.gesture.destroy()},t.prototype.pinchEvent=function(t){this.canvasManagerService.emptyCanvas()},Object.defineProperty(t.prototype,"hasPictograms",{get:function(){return!!this.icons},enumerable:!0,configurable:!0}),t.prototype.addText=function(){this.canvasManagerService.addText(this.strokeColor,"text "),this.emitCanvas()},t.prototype.addShape=function(t){this.canvasManagerService.addGeometricShape(this.strokeColor,this.fillColor,r[t]),this.emitCanvas()},t.prototype.addImage=function(t){this.canvasManagerService.addImage(this.iconsPath+t),this.emitCanvas()},t.prototype.changeStrokeColor=function(){this.canvasManagerService.changeSelectedObjectsStrokeColor(this.strokeColor),this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor),this.emitCanvas()},t.prototype.bringFoward=function(){this.canvasManagerService.bringSelectedObjectsToFront(),this.emitCanvas()},t.prototype.sendToBack=function(){this.canvasManagerService.sendSelectedObjectsToBack(),this.emitCanvas()},t.prototype.crop=function(){this.isCropping=!0,this.canvasManagerService.disableSelection(),this.canvasManagerService.addSelectionRectangle(),this.isUndoAvailable=!0,this.previousJson=this.canvasManagerService.jsonFromCanvas(),this.emitCanvas()},t.prototype.deleteSelection=function(){this.canvasManagerService.deleteSelectedObjects(),this.emitCanvas()},t.prototype.mouseUp=function(t){this.isCropping&&(this.isCropping=!1,this.canvasManagerService.cropImage(),this.isUndoAvailable=!0,this.emitCanvas())},t.prototype.mouseMove=function(t){this.isCropping?this.canvasManagerService.ajustCropRectangle(t):3===t.touches.length&&this.canvasManagerService.panCanvas(t)},t.prototype.mouseDown=function(t){this.isCropping?this.canvasManagerService.startSelectingCropRectangle(t):3===t.touches.length&&this.canvasManagerService.setLastPanPosition(t)},t.prototype.pinch=function(t){t.preventDefault(),this.canvasManagerService.zoom(t)},t.prototype.group=function(){this.canvasManagerService.groupSelectedObjects(),this.emitCanvas()},t.prototype.undo=function(){this.canvasManagerService.loadfromJson(this.previousJson),this.isUndoAvailable=!1,this.emitCanvas()},t.prototype.onColorClicked=function(){this.isSelectingColor=!0},t.prototype.setColor=function(t){this.strokeColor=t,this.changeStrokeColor(),this.isSelectingColor=!1,this.emitCanvas()},t.prototype.draw=function(){this.isDrawing=!this.isDrawing,this.canvasManagerService.toggleFreeDrawing(),this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor)},t.prototype.disableDrawing=function(){this.isDrawing&&(this.isDrawing=!1,this.canvasManagerService.toggleFreeDrawing())},t.prototype.translateShapeButtonsText=function(){var t=[];return t.push(this.translate.instant("rectangle")),t.push(this.translate.instant("triangle")),t.push(this.translate.instant("circle")),t.push(this.translate.instant("line")),t.push(this.translate.instant("cross")),t.push(this.translate.instant("text")),t},t.prototype.presentShapeActionSheet=function(){var t=this;this.disableDrawing();var n=this.translate.instant("addGeometricShape"),e=this.translateShapeButtonsText(),o=0;this.actionSheetCtrl.create({title:n,buttons:[{text:" "+e[o++],handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,r.Rectangle)}},{text:" "+e[o++],handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,r.Triangle)}},{text:" "+e[o++],handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,r.Circle)}},{text:" "+e[o++],handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,r.Line)}},{text:" "+e[o++],handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,r.Cross)}},{text:" "+e[o++],handler:function(){t.canvasManagerService.addText(t.strokeColor,"")}}]}).present()},t.prototype.translateEditButtonsText=function(){var t=[];return t.push(this.translate.instant("crop")),t.push(this.translate.instant("group")),t.push(this.translate.instant("bringToFront")),t.push(this.translate.instant("sendToBack")),t.push(this.translate.instant("delete")),t},t.prototype.presentEditActionSheet=function(){var t=this;this.disableDrawing();var n=this.translate.instant("edition"),e=this.translateEditButtonsText(),o=0;this.actionSheetCtrl.create({title:n,buttons:[{text:" "+e[o++],handler:function(){t.crop()}},{text:" "+e[o++],handler:function(){t.group()}},{text:" "+e[o++],handler:function(){t.bringFoward()}},{text:" "+e[o++],handler:function(){t.sendToBack()}},{text:" "+e[o++],handler:function(){t.deleteSelection()}}]}).present()},t.prototype.presentPictogramsActionSheet=function(){var e=this;this.disableDrawing();for(var o=[],a=[],i=this.icons,t=function(t){var n=document.createElement("style");n.type="text/css",n.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(n),a.push(n),o.push({role:"destructive",text:i[t],cssClass:"customCSSClass"+t,handler:function(){e.addImage(i[t])}})},r=this,n=0;n<i.length;n++)t(n);var s=this.translate.instant("addPictogram"),c=this.actionSheetCtrl.create({title:s,buttons:o});c.onDidDismiss(function(){for(var t=0;t<a.length;t++)null!=a[t].parentNode&&a[t].parentNode.removeChild(a[t])}),c.present()},t.prototype.emitCanvas=function(){this.canvas.emit(this.canvasManagerService.canvas)},t.decorators=[{type:o.Component,args:[{selector:"lib-mobile-sketch-tool",template:'<ion-content>\n <div\n class="div-canvas-container"\n (touchstart)="mouseDown($event)"\n (touchmove)="mouseMove($event)"\n (touchend)="mouseUp($event)"\n #pinchElement\n >\n <canvas id="canvas"></canvas>\n\n <div\n class="color-picker"\n *ngIf="isSelectingColor"\n >\n <ion-grid fixed>\n <ion-row>\n <ion-col\n style="background:#660000"\n (tap)="setColor(\'#660000\')"\n > \n </ion-col>\n <ion-col\n style="background:#663300"\n (tap)="setColor(\'#663300\')"\n > \n </ion-col>\n <ion-col\n style="background:#666600"\n (tap)="setColor(\'#666600\')"\n > \n </ion-col>\n <ion-col\n style="background:#006600"\n (tap)="setColor(\'#006600\')"\n > \n </ion-col>\n <ion-col\n style="background:#000066"\n (tap)="setColor(\'#000066\')"\n > \n </ion-col>\n <ion-col\n style="background:#660066"\n (tap)="setColor(\'#660066\')"\n > \n </ion-col>\n\n </ion-row>\n <ion-row>\n <ion-col\n style="background:#CC0000"\n (tap)="setColor(\'#CC0000\')"\n > \n </ion-col>\n <ion-col\n style="background:#CC6600"\n (tap)="setColor(\'#CC6600\')"\n > \n </ion-col>\n <ion-col\n style="background:#CCCC00"\n (tap)="setColor(\'#CCCC00\')"\n > \n </ion-col>\n <ion-col\n style="background:#00CC00"\n (tap)="setColor(\'#00CC00\')"\n > \n </ion-col>\n <ion-col\n style="background:#0000CC"\n (tap)="setColor(\'#0000CC\')"\n > \n </ion-col>\n <ion-col\n style="background:#CC00CC"\n (tap)="setColor(\'#CC00CC\')"\n > \n </ion-col>\n\n </ion-row>\n <ion-row>\n <ion-col\n style="background:#FF0000"\n (tap)="setColor(\'#FF0000\')"\n > \n </ion-col>\n <ion-col\n style="background:#FF8000"\n (tap)="setColor(\'#FF8000\')"\n > \n </ion-col>\n <ion-col\n style="background:#FFFF00"\n (tap)="setColor(\'#FFFF00\')"\n > \n </ion-col>\n <ion-col\n style="background:#00FF00"\n (tap)="setColor(\'#00FF00\')"\n > \n </ion-col>\n <ion-col\n style="background:#0000FF"\n (tap)="setColor(\'#0000FF\')"\n > \n </ion-col>\n <ion-col\n style="background:#FF00FF"\n (tap)="setColor(\'#FF00FF\')"\n > \n </ion-col>\n\n </ion-row>\n <ion-row>\n <ion-col\n style="background:#FF6666"\n (tap)="setColor(\'#FF6666\')"\n > \n </ion-col>\n <ion-col\n style="background:#FFB266"\n (tap)="setColor(\'#FFB266\')"\n > \n </ion-col>\n <ion-col\n style="background:#FFFF66"\n (tap)="setColor(\'#FFFF66\')"\n > \n </ion-col>\n <ion-col\n style="background:#66FF66"\n (tap)="setColor(\'#66FF66\')"\n > \n </ion-col>\n <ion-col\n style="background:#6666FF"\n (tap)="setColor(\'#6666FF\')"\n > \n </ion-col>\n <ion-col\n style="background:#FF66FF"\n (tap)="setColor(\'#FF66FF\')"\n > \n </ion-col>\n\n </ion-row>\n <ion-row>\n <ion-col\n style="background:#FF9999"\n (tap)="setColor(\'#FF9999\')"\n > \n </ion-col>\n <ion-col\n style="background:#FFCC99"\n (tap)="setColor(\'#FFCC99\')"\n > \n </ion-col>\n <ion-col\n style="background:#FFFF99"\n (tap)="setColor(\'#FFFF99\')"\n > \n </ion-col>\n <ion-col\n style="background:#99FF99"\n (tap)="setColor(\'#99FF99\')"\n > \n </ion-col>\n <ion-col\n style="background:#9999FF"\n (tap)="setColor(\'#9999FF\')"\n > \n </ion-col>\n <ion-col\n style="background:#FF99FF"\n (tap)="setColor(\'#FF99FF\')"\n > \n </ion-col>\n\n </ion-row>\n <ion-row>\n <ion-col\n style="background:#FFFFFF"\n (tap)="setColor(\'#FFFFFF\')"\n > \n </ion-col>\n <ion-col\n style="background:#C0C0C0"\n (tap)="setColor(\'#C0C0C0\')"\n > \n </ion-col>\n <ion-col\n style="background:#808080"\n (tap)="setColor(\'#808080\')"\n > \n </ion-col>\n <ion-col\n style="background:#606060"\n (tap)="setColor(\'#606060\')"\n > \n </ion-col>\n <ion-col\n style="background:#303030"\n (tap)="setColor(\'#606060\')"\n > \n </ion-col>\n <ion-col\n style="background:#000000"\n (tap)="setColor(\'#000000\')"\n > \n </ion-col>\n </ion-row>\n </ion-grid>\n </div>\n </div>\n</ion-content>\n\n<ion-footer>\n <ion-toolbar>\n <div class="div-edit-toolbar">\n <button\n class="button-edit-toolbar"\n ion-button\n large\n [clear]="true"\n (click)="presentShapeActionSheet()"\n >\n <i\n class="fas fa-shapes"\n id="icon"\n ></i>\n </button>\n\n <button\n class="button-edit-toolbar"\n ion-button\n large\n [clear]="true"\n (click)="presentPictogramsActionSheet()"\n *ngIf="hasPictograms"\n >\n <i\n class="fas fa-images"\n id="icon"\n ></i>\n </button>\n\n <button\n class="button-edit-toolbar"\n ion-button\n large\n [clear]="true"\n (click)="presentEditActionSheet()"\n >\n <i\n class="fas fa-edit"\n id="icon"\n ></i>\n </button>\n\n <button\n class="button-edit-toolbar"\n ion-button\n large\n [clear]="true"\n (click)="draw()"\n >\n <i\n class="fas fa-pencil-alt"\n id="icon"\n ></i>\n </button>\n\n <button\n class="button-edit-toolbar"\n ion-button\n large\n [clear]="true"\n (click)="onColorClicked()"\n >\n <i\n class="fas fa-palette"\n id="icon"\n ></i>\n </button>\n\n <button\n class="button-edit-toolbar"\n ion-button\n large\n [clear]="true"\n (click)="undo()"\n *ngIf="isUndoAvailable"\n >\n <i\n class="fas fa-undo"\n id="icon"\n ></i>\n </button>\n\n </div>\n </ion-toolbar>\n</ion-footer>\n',styles:[".div-canvas-container{text-align:center;height:100%;width:100%;-o-object-fit:contain;object-fit:contain}.scroll-content{padding:0!important;overflow-y:hidden}.div-edit-toolbar{text-align:center}.button-edit-toolbar{padding:4%!important;margin:0!important}.action-sheet-button{font-family:FontAwesome,Arial}.color-picker{position:absolute;width:100%;height:auto;bottom:0;left:0}#icon{color:#b32017}"],providers:[y]}]}],t.ctorParameters=function(){return[{type:n.ActionSheetController},{type:y},{type:a.TranslateService}]},t.propDecorators={element:[{type:o.ViewChild,args:["pinchElement"]}],imageData:[{type:o.Input}],loadedJson:[{type:o.Input}],iconsPath:[{type:o.Input}],icons:[{type:o.Input}],canvas:[{type:o.Output}]},t}(),C=function(){function t(){}return t.decorators=[{type:o.NgModule,args:[{imports:[i.CommonModule,n.IonicModule],declarations:[b],providers:[y],exports:[b]}]}],t}();t.MobileSketchToolComponent=b,t.CanvasManagerService=y,t.SketchToolModule=C,Object.defineProperty(t,"__esModule",{value:!0})});
|