| 1 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(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"],e):e(t["lib-sketch-tool"]={},t.ng.core,null,null,null,null,t.ng.common)}(this,function(t,o,l,e,n,a,i){"use strict";var s={Rectangle:0,Circle:1,Triangle:2,Line:3,Cross:4};function h(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}}}}s[s.Rectangle]="Rectangle",s[s.Circle]="Circle",s[s.Triangle]="Triangle",s[s.Line]="Line",s[s.Cross]="Cross";var r=200,c=200,p=50,d=50,u=100,g=10,v=10,f=20,b=function(){function t(){this.canvasId="canvas",this.mousePosition={x:0,y:0},this.left=0}return 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}),Object.defineProperty(t.prototype,"divCanvasContainer",{get:function(){var t=document.getElementsByClassName("div-canvas-container");return t[t.length-1]},enumerable:!0,configurable:!0}),t.prototype.createCanvas=function(t){this.canvasId=t,this.canvas=new l.fabric.Canvas(this.canvasId)},t.prototype.emptyCanvas=function(){this.canvas&&this.canvas.dispose(),this.canvas=new l.fabric.Canvas(this.canvasId),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 s.Rectangle:this.addRectangle(t,e);break;case s.Circle:this.addCircle(t,e);break;case s.Triangle:this.addTriangle(t,e);break;case s.Line:this.addHorizontalLine(t,e);break;case s.Cross:this.addCross(t,e)}},t.prototype.addRectangle=function(t,e){this.canvas.add(new l.fabric.Rect({width:r,height:c,left:p,top:d,fill:e,stroke:t,strokeWidth:g,cornerSize:f}))},t.prototype.addCircle=function(t,e){this.canvas.add(new l.fabric.Circle({left:p,top:d,radius:u,stroke:t,strokeWidth:g,fill:e,cornerSize:f}))},t.prototype.addTriangle=function(t,e){this.canvas.add(new l.fabric.Triangle({width:r,height:c,left:p,top:d,fill:e,stroke:t,strokeWidth:g,cornerSize:f}))},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,cornerSize:f});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,cornerSize:f});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.setFreeDrawingBrushWidthFromZoom(this.canvas.getZoom())},t.prototype.setFreeDrawingBrushWidthFromZoom=function(t){this.canvas.freeDrawingBrush.width=v*(1/t)},t.prototype.addText=function(t,e){var n=new l.fabric.IText("text",{fontFamily:"arial black",fontStyle:"bold",left:p,top:d,cornerSize:f});n.setColor(t),this.canvas.add(n)},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:p,top:d,scaleX:1,scaleY:1,cornerSize:f});o.add(e),n()},a.src=e})},t.prototype.setBackgroundFromURL=function(e){var a=this,t=this.divCanvasContainer;return this.setCanvasSize(t.clientWidth,t.clientHeight),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=a.computeScaleFactor(t,a.canvas);a.canvas.setBackgroundImage(t,a.canvas.renderAll.bind(a.canvas),{scaleX:e.scaleFactor,scaleY:e.scaleFactor}),a.setCanvasSize(t.width*e.scaleFactor,t.height*e.scaleFactor),a.canvas.renderAll(),n()},o.src=e})},t.prototype.computeScaleFactor=function(t,e){var n,o,a,i=this.divCanvasContainer;return i.clientWidth/i.clientHeight<=t.width/t.height?(a=i.clientWidth/t.width,n=0,o=-(t.height*a-i.clientHeight)/2):(a=i.clientHeight/t.height,o=0,n=-(t.width*a-i.clientWidth)/2),{scaleFactor:a,left:this.left=n,top:o}},t.prototype.onOrientationChange=function(){this.mousePosition={x:this.canvas.getWidth,y:this.canvas.getHeight},this.cropImage()},t.prototype.changeSelectedObjectsFillColor=function(t){var e,n,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(s){e={error:s}}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=h(o),i=a.next();!i.done;i=a.next()){var s=i.value;"i-text"===s.type?s.setColor(t):(s.stroke=t,s.set("dirty",!0))}}catch(r){e={error:r}}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=h(n),a=o.next();!a.done;a=o.next()){var i=a.value;this.canvas.remove(i)}}catch(s){t={error:s}}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=h(n),a=o.next();!a.done;a=o.next()){var i=a.value;this.canvas.bringToFront(i)}}catch(s){t={error:s}}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=h(n),a=o.next();!a.done;a=o.next()){var i=a.value;this.canvas.sendToBack(i)}}catch(s){t={error:s}}finally{try{a&&!a.done&&(e=o["return"])&&e.call(o)}finally{if(t)throw t.error}}},t.prototype.jsonFromCanvas=function(){return this.canvas.toJSON(["width","height"])},t.prototype.loadfromJson=function(n){var o=this,t=this.divCanvasContainer;return this.setCanvasSize(t.clientWidth,t.clientHeight),new Promise(function(t,e){o.adjustCanvas(n),o.canvas.loadFromJSON(n,o.canvas.renderAll.bind(o.canvas)),o.canvas.renderAll(),t()})},t.prototype.adjustCanvas=function(t){var e,n,o=t.backgroundImage,a=this.divCanvasContainer,i=t.width,s=t.height,r=a.clientWidth,c=a.clientHeight;r/c<=i/s?(e=r/i,n=0):n=-(i*(e=c/s)-a.clientWidth)/2,this.left=n,o.scaleX*=e,o.scaleY*=e,this.setCanvasSize(i*e,s*e);for(var l=t.objects,h=0;h<l.length;h++)l[h].left*=e,l[h].top*=e,l[h].scaleX*=e,l[h].scaleY*=e},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.markSelectedObjectsDirty=function(){var t,e,n=this.canvas.getActiveObjects();if(n)try{for(var o=h(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:0,height:0}),this.cropRectangle.visible=!1,this.canvas.add(this.cropRectangle)},t.prototype.ajustCropRectangleFromMouse=function(t){var e=Math.min(t.offsetX,this.mousePosition.x),n=Math.min(t.offsetY,this.mousePosition.y),o=Math.abs(t.offsetX-this.mousePosition.x),a=Math.abs(t.offsetY-this.mousePosition.y);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.cropRectangle.left=t.offsetX,this.cropRectangle.top=t.offsetY,this.cropRectangle.setCoords(),this.mousePosition={x:t.offsetX,y:t.offsetY},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=this.divCanvasContainer,s=i.clientWidth,r=i.clientHeight;t=s/r<=o/a?s/o:r/a,this.setCanvasSize(o*t,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.enableSlection(),this.cropRectangle.visible=!1,this.canvas.remove(this.cropRectangle),this.canvas.renderAll()},t.prototype.enableSlection=function(){this.canvas.selectable=!0,this.canvas.selection=!0},t.prototype.ajustCropRectangle=function(t){var e=t.touches[0],n=t.target.getBoundingClientRect(),o=Math.min(e.clientX-n.left,this.mousePosition.x),a=Math.min(e.clientY-n.top,this.mousePosition.y),i=Math.abs(e.clientX-n.left-this.mousePosition.x),s=Math.abs(e.clientY-n.top-this.mousePosition.y);return!(!i||!s)&&(this.cropRectangle.set("left",o).set("top",a).set("width",i).set("height",s),this.canvas.renderAll(),!0)},t.prototype.startSelectingCropRectangle=function(t){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.mousePosition={x:e.clientX-n.left,y: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 s=h(i),r=s.next();!r.done;r=s.next()){var c=r.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{r&&!r.done&&(a=s["return"])&&a.call(s)}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=h(n),i=a.next();!i.done;i=a.next()){var s=i.value;o.push(s)}}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 r=new l.fabric.Group(o);this.canvas.add(r),r.setCoords(),this.canvas.setActiveObject(r),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 e=new l.fabric.Point(t.touches[0].clientX-this.lastPanPosition.x,t.touches[0].clientY-this.lastPanPosition.y);this.canvas.relativePan(e),this.preventPanOutsideCanvas(),this.canvas.renderAll(),this.setLastPanPosition(t)},t.prototype.preventPanOutsideCanvas=function(){var t=this.canvas.viewportTransform,e=this.canvas.height*(t[0]-1);(0<=t[5]||-e>t[5])&&(t[5]=0<=t[5]?0:-e);var n=this.canvas.width*(t[0]-1);(0<=t[4]||-n>t[4])&&(t[4]=0<=t[4]?0:-n)},t.prototype.zoom=function(t){if(.005<Math.abs(t.overallVelocity)){var e=new l.fabric.Point(t.center.x,t.center.y),n=this.canvas.getZoom();(n+=(t.scale-n)/20)<1?(n=1,this.canvas.zoomToPoint(new l.fabric.Point(0,0),n),this.canvas.absolutePan(new l.fabric.Point(0,0))):(10<n&&(n=10),this.canvas.zoomToPoint(e,n)),this.setFreeDrawingBrushWidthFromZoom(n),this.canvas.renderAll()}},t.prototype.setCanvasSize=function(t,e){this.canvas.setWidth(t),this.canvas.setHeight(e)},t.prototype.resetZoom=function(){this.canvas.zoomToPoint(new l.fabric.Point(0,0),1),this.canvas.absolutePan(new l.fabric.Point(0,0))},t.decorators=[{type:o.Injectable}],t.ctorParameters=function(){return[]},t}(),C=function(){function t(t,e,n){this.actionSheetCtrl=t,this.canvasManagerService=e,this.translate=n,this.canvas=new o.EventEmitter,this.strokeColor="#000000",this.fillColor="transparent",this.isCropping=!1,this.isPanning=!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 e=this;this.gesture=new n.Gesture(this.element.nativeElement),this.gesture.listen(),this.gesture.on("pinch",function(t){return e.pinch(t)})},t.prototype.ngOnDestroy=function(){this.gesture.destroy()},Object.defineProperty(t.prototype,"hasPictograms",{get:function(){return!!this.icons},enumerable:!0,configurable:!0}),t.prototype.addText=function(){this.disableAllStates(),this.canvasManagerService.addText(this.strokeColor,"text "),this.emitCanvas()},t.prototype.addShape=function(t){this.disableAllStates(),this.canvasManagerService.addGeometricShape(this.strokeColor,this.fillColor,s[t]),this.emitCanvas()},t.prototype.addImage=function(t){this.disableAllStates(),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.disableAllStates(),this.canvasManagerService.bringSelectedObjectsToFront(),this.emitCanvas()},t.prototype.sendToBack=function(){this.disableAllStates(),this.canvasManagerService.sendSelectedObjectsToBack(),this.emitCanvas()},t.prototype.crop=function(){this.isCropping?this.disableCroppping():(this.disableAllStates(),this.isCropping=!0,this.canvasManagerService.resetZoom(),this.canvasManagerService.disableSelection(),this.canvasManagerService.addSelectionRectangle(),this.isUndoAvailable=!0,this.previousJson=this.canvasManagerService.jsonFromCanvas(),this.emitCanvas())},t.prototype.disableCroppping=function(){this.isCropping=!1,this.canvasManagerService.enableSlection(),this.isUndoAvailable=!1},t.prototype.deleteSelection=function(){this.disableAllStates(),this.canvasManagerService.deleteSelectedObjects(),this.emitCanvas()},t.prototype.mouseUp=function(){this.isCropping&&(this.isCropping=!1,this.canvasManagerService.cropImage(),this.isUndoAvailable=!0,this.emitCanvas())},t.prototype.mouseMove=function(t){this.isCropping?this.canvasManagerService.ajustCropRectangle(t):this.isPanning&&this.canvasManagerService.panCanvas(t)},t.prototype.mouseDown=function(t){this.isCropping?this.canvasManagerService.startSelectingCropRectangle(t):this.isPanning&&this.canvasManagerService.setLastPanPosition(t)},t.prototype.pinch=function(t){t.preventDefault(),this.disableDrawing(),this.canvasManagerService.zoom(t)},t.prototype.group=function(){this.disableAllStates(),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,this.stopPanning()},t.prototype.onMoveClicked=function(){this.isPanning=!this.isPanning,this.disableDrawing(),this.isPanning?this.canvasManagerService.disableSelection():this.canvasManagerService.enableSlection()},t.prototype.disablePanning=function(){this.isPanning=!1,this.canvasManagerService.enableSlection()},t.prototype.disableAllStates=function(){this.disableDrawing(),this.disablePanning()},t.prototype.stopPanning=function(){this.isPanning&&(this.isPanning=!1,this.canvasManagerService.enableSlection())},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),this.isDrawing&&(this.isPanning=!1)},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 e=this.translate.instant("addGeometricShape"),n=this.translateShapeButtonsText(),o=0;this.actionSheetCtrl.create({title:e,buttons:[{text:" "+n[o++],handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,s.Rectangle)}},{text:" "+n[o++],handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,s.Triangle)}},{text:" "+n[o++],handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,s.Circle)}},{text:" "+n[o++],handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,s.Line)}},{text:" "+n[o++],handler:function(){t.canvasManagerService.addGeometricShape(t.strokeColor,t.fillColor,s.Cross)}},{text:" "+n[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 e=this.translate.instant("edition"),n=this.translateEditButtonsText(),o=0;this.actionSheetCtrl.create({title:e,buttons:[{text:" "+n[o++],handler:function(){t.crop()}},{text:" "+n[o++],handler:function(){t.group()}},{text:" "+n[o++],handler:function(){t.bringFoward()}},{text:" "+n[o++],handler:function(){t.sendToBack()}},{text:" "+n[o++],handler:function(){t.deleteSelection()}}]}).present()},t.prototype.presentPictogramsActionSheet=function(){var n=this;this.disableDrawing();for(var o=[],a=[],i=this.icons,t=function(t){var e=document.createElement("style");e.type="text/css",e.innerHTML=".customCSSClass"+t+"{background: url('"+s.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])}})},s=this,e=0;e<i.length;e++)t(e);var r=this.translate.instant("addPictogram"),c=this.actionSheetCtrl.create({title:r,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 class="div-canvas-container" (touchstart)="mouseDown($event)" (touchmove)="mouseMove($event)" (touchend)="mouseUp()"\n #pinchElement>\n <canvas id="canvas"></canvas>\n\n <div class="color-picker" *ngIf="isSelectingColor">\n <ion-grid fixed>\n <ion-row>\n <ion-col style="background:#660000" (tap)="setColor(\'#660000\')">\n </ion-col>\n <ion-col style="background:#663300" (tap)="setColor(\'#663300\')">\n </ion-col>\n <ion-col style="background:#666600" (tap)="setColor(\'#666600\')">\n </ion-col>\n <ion-col style="background:#006600" (tap)="setColor(\'#006600\')">\n </ion-col>\n <ion-col style="background:#000066" (tap)="setColor(\'#000066\')">\n </ion-col>\n <ion-col style="background:#660066" (tap)="setColor(\'#660066\')">\n </ion-col>\n\n </ion-row>\n <ion-row>\n <ion-col style="background:#CC0000" (tap)="setColor(\'#CC0000\')">\n </ion-col>\n <ion-col style="background:#CC6600" (tap)="setColor(\'#CC6600\')">\n </ion-col>\n <ion-col style="background:#CCCC00" (tap)="setColor(\'#CCCC00\')">\n </ion-col>\n <ion-col style="background:#00CC00" (tap)="setColor(\'#00CC00\')">\n </ion-col>\n <ion-col style="background:#0000CC" (tap)="setColor(\'#0000CC\')">\n </ion-col>\n <ion-col style="background:#CC00CC" (tap)="setColor(\'#CC00CC\')">\n </ion-col>\n\n </ion-row>\n <ion-row>\n <ion-col style="background:#FF0000" (tap)="setColor(\'#FF0000\')">\n </ion-col>\n <ion-col style="background:#FF8000" (tap)="setColor(\'#FF8000\')">\n </ion-col>\n <ion-col style="background:#FFFF00" (tap)="setColor(\'#FFFF00\')">\n </ion-col>\n <ion-col style="background:#00FF00" (tap)="setColor(\'#00FF00\')">\n </ion-col>\n <ion-col style="background:#0000FF" (tap)="setColor(\'#0000FF\')">\n </ion-col>\n <ion-col style="background:#FF00FF" (tap)="setColor(\'#FF00FF\')">\n </ion-col>\n\n </ion-row>\n <ion-row>\n <ion-col style="background:#FF6666" (tap)="setColor(\'#FF6666\')">\n </ion-col>\n <ion-col style="background:#FFB266" (tap)="setColor(\'#FFB266\')">\n </ion-col>\n <ion-col style="background:#FFFF66" (tap)="setColor(\'#FFFF66\')">\n </ion-col>\n <ion-col style="background:#66FF66" (tap)="setColor(\'#66FF66\')">\n </ion-col>\n <ion-col style="background:#6666FF" (tap)="setColor(\'#6666FF\')">\n </ion-col>\n <ion-col style="background:#FF66FF" (tap)="setColor(\'#FF66FF\')">\n </ion-col>\n\n </ion-row>\n <ion-row>\n <ion-col style="background:#FF9999" (tap)="setColor(\'#FF9999\')">\n </ion-col>\n <ion-col style="background:#FFCC99" (tap)="setColor(\'#FFCC99\')">\n </ion-col>\n <ion-col style="background:#FFFF99" (tap)="setColor(\'#FFFF99\')">\n </ion-col>\n <ion-col style="background:#99FF99" (tap)="setColor(\'#99FF99\')">\n </ion-col>\n <ion-col style="background:#9999FF" (tap)="setColor(\'#9999FF\')">\n </ion-col>\n <ion-col style="background:#FF99FF" (tap)="setColor(\'#FF99FF\')">\n </ion-col>\n\n </ion-row>\n <ion-row>\n <ion-col style="background:#FFFFFF" (tap)="setColor(\'#FFFFFF\')">\n </ion-col>\n <ion-col style="background:#C0C0C0" (tap)="setColor(\'#C0C0C0\')">\n </ion-col>\n <ion-col style="background:#808080" (tap)="setColor(\'#808080\')">\n </ion-col>\n <ion-col style="background:#606060" (tap)="setColor(\'#606060\')">\n </ion-col>\n <ion-col style="background:#303030" (tap)="setColor(\'#606060\')">\n </ion-col>\n <ion-col style="background:#000000" (tap)="setColor(\'#000000\')">\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 class="button-edit-toolbar" ion-button large [clear]="true" (click)="presentShapeActionSheet()">\n <i class="fas fa-shapes" id="icon"></i>\n </button>\n\n <button class="button-edit-toolbar" ion-button large [clear]="true" (click)="presentPictogramsActionSheet()" *ngIf="hasPictograms">\n <i class="fas fa-images" id="icon"></i>\n </button>\n\n <button class="button-edit-toolbar" ion-button large [clear]="true" (click)="presentEditActionSheet()">\n <i class="fas fa-edit" id="icon"></i>\n </button>\n\n <button class="button-edit-toolbar" ion-button large [clear]="!isDrawing" (click)="draw()">\n <i class="fas fa-pencil-alt" id="icon"></i>\n </button>\n\n <button class="button-edit-toolbar" ion-button large [clear]="true" (click)="onColorClicked()">\n <i class="fas fa-palette" id="icon"></i>\n </button>\n\n <button class="button-edit-toolbar" ion-button large [clear]="!isPanning" (click)="onMoveClicked()">\n <i class="fas fa-arrows-alt" id="icon"></i>\n </button>\n\n <button class="button-edit-toolbar" ion-button large [clear]="true" (click)="undo()" *ngIf="isUndoAvailable">\n <i class="fas fa-undo" id="icon"></i>\n </button>\n\n </div>\n </ion-toolbar>\n</ion-footer>\n',styles:[".div-canvas-container{height:100%;width:100%;-o-object-fit:contain;object-fit:contain;text-align:center;margin:0 auto;padding:0 auto}.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}.col{padding:10px}"],providers:[b]}]}],t.ctorParameters=function(){return[{type:e.ActionSheetController},{type:b},{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}(),y=function(){function t(){}return t.decorators=[{type:o.NgModule,args:[{imports:[i.CommonModule,e.IonicModule],declarations:[C],providers:[b],exports:[C]}]}],t}();t.MobileSketchToolComponent=C,t.SketchToolModule=y,t.CanvasManagerService=b,Object.defineProperty(t,"__esModule",{value:!0})});
|