lib-sketch-tool/bundles/lib-sketch-tool.umd.min.js

## Installing with npm $ npm install --save lib-sketch-tool

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("fabric"),require("@ngx-translate/core"),require("@ionic/angular"),require("@angular/common")):"function"==typeof define&&define.amd?define("lib-sketch-tool",["exports","@angular/core","fabric","@ngx-translate/core","@ionic/angular","@angular/common"],e):e((t=t||self)["lib-sketch-tool"]={},t.ng.core,t.fabric,t.core$1,t.angular,t.ng.common)}(this,function(t,e,n,o,i,a){"use strict";function s(t,e,n,o){var i,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,n,o);else for(var r=t.length-1;r>=0;r--)(i=t[r])&&(s=(a<3?i(s):a>3?i(e,n,s):i(e,n))||s);return a>3&&s&&Object.defineProperty(e,n,s),s}function r(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}function c(t,e,n,o){return new(n||(n=Promise))(function(i,a){function s(t){try{c(o.next(t))}catch(e){a(e)}}function r(t){try{c(o["throw"](t))}catch(e){a(e)}}function c(t){t.done?i(t.value):new n(function(e){e(t.value)}).then(s,r)}c((o=o.apply(t,e||[])).next())})}function l(t,e){var n,o,i,a,s={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return a={next:r(0),"throw":r(1),"return":r(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function r(a){return function(r){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,o&&(i=2&a[0]?o["return"]:a[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,a[1])).done)return i;switch(o=0,i&&(a=[2&a[0],i.value]),a[0]){case 0:case 1:i=a;break;case 4:return s.label++,{value:a[1],done:!1};case 5:s.label++,o=a[1],a=[0];continue;case 7:a=s.ops.pop(),s.trys.pop();continue;default:if(!(i=(i=s.trys).length>0&&i[i.length-1])&&(6===a[0]||2===a[0])){s=0;continue}if(3===a[0]&&(!i||a[1]>i[0]&&a[1]<i[3])){s.label=a[1];break}if(6===a[0]&&s.label<i[1]){s.label=i[1],i=a;break}if(i&&s.label<i[2]){s.label=i[2],s.ops.push(a);break}i[2]&&s.ops.pop(),s.trys.pop();continue}a=e.call(t,s)}catch(r){a=[6,r],o=0}finally{n=i=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,r])}}}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}}}}var p;!function(t){t[t.Rectangle=0]="Rectangle",t[t.Circle=1]="Circle",t[t.Triangle=2]="Triangle",t[t.Line=3]="Line",t[t.Cross=4]="Cross"}(p||(p={}));var d=200,u=200,v=50,g=50,f=100,b=10,y=10,C=20,m=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 n.fabric.Canvas(this.canvasId)},t.prototype.emptyCanvas=function(){this.canvas&&this.canvas.dispose(),this.canvas=new n.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 p.Rectangle:this.addRectangle(t,e);break;case p.Circle:this.addCircle(t,e);break;case p.Triangle:this.addTriangle(t,e);break;case p.Line:this.addHorizontalLine(t,e);break;case p.Cross:this.addCross(t,e)}},t.prototype.addRectangle=function(t,e){this.canvas.add(new n.fabric.Rect({width:d,height:u,left:v,top:g,fill:e,stroke:t,strokeWidth:b,cornerSize:C}))},t.prototype.addCircle=function(t,e){this.canvas.add(new n.fabric.Circle({left:v,top:g,radius:f,stroke:t,strokeWidth:b,fill:e,cornerSize:C}))},t.prototype.addTriangle=function(t,e){this.canvas.add(new n.fabric.Triangle({width:d,height:u,left:v,top:g,fill:e,stroke:t,strokeWidth:b,cornerSize:C}))},t.prototype.addHorizontalLine=function(t,e){this.canvas.add(this.createHorizontalLine(t))},t.prototype.createHorizontalLine=function(t){var e=new n.fabric.Line([100,150,200,150],{left:50,top:100,stroke:t,strokeWidth:5,cornerSize:C});return e.setControlsVisibility({bl:!1,br:!1,tl:!1,tr:!1,mt:!1,mb:!1}),e},t.prototype.createVerticalLine=function(t){var e=new n.fabric.Line([150,100,150,200],{left:100,top:50,stroke:t,strokeWidth:5,cornerSize:C});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=y*(1/t)},t.prototype.addText=function(t,e){var o=new n.fabric.IText("text",{fontFamily:"arial black",fontStyle:"bold",left:v,top:g,cornerSize:C});o.setColor(t),this.canvas.add(o)},t.prototype.addImage=function(t){var e=this;return new Promise(function(o,i){var a=e.canvas,s=new Image;s.onload=function(t){var e=new n.fabric.Image(s,{angle:0,width:s.width,height:s.height,left:v,top:g,scaleX:1,scaleY:1,cornerSize:C});a.add(e),o()},s.src=t})},t.prototype.setBackgroundFromURL=function(t){var e=this,o=this.divCanvasContainer;return this.setCanvasSize(o.clientWidth,o.clientHeight),new Promise(function(o,i){if(null==t)return i();var a=new Image;a.onload=function(){var t=new n.fabric.Image(a,{}),i=e.computeScaleFactor(t,e.canvas);e.canvas.setBackgroundImage(t,e.canvas.renderAll.bind(e.canvas),{scaleX:i.scaleFactor,scaleY:i.scaleFactor}),e.setCanvasSize(t.width*i.scaleFactor,t.height*i.scaleFactor),e.canvas.renderAll(),o()},a.src=t})},t.prototype.computeScaleFactor=function(t,e){var n,o,i,a=this.divCanvasContainer;return a.clientWidth/a.clientHeight<=t.width/t.height?(i=a.clientWidth/t.width,n=0,o=-(t.height*i-a.clientHeight)/2):(i=a.clientHeight/t.height,o=0,n=-(t.width*i-a.clientWidth)/2),this.left=n,{scaleFactor:i,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 i=h(o),a=i.next();!a.done;a=i.next()){a.value.setColor(t),this.canvas.renderAll()}}catch(s){e={error:s}}finally{try{a&&!a.done&&(n=i["return"])&&n.call(i)}finally{if(e)throw e.error}}},t.prototype.changeSelectedObjectsStrokeColor=function(t){var e,n,o=this.canvas.getActiveObjects();if(o){try{for(var i=h(o),a=i.next();!a.done;a=i.next()){var s=a.value;"i-text"===s.type?s.setColor(t):(s.stroke=t,s.set("dirty",!0))}}catch(r){e={error:r}}finally{try{a&&!a.done&&(n=i["return"])&&n.call(i)}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),i=o.next();!i.done;i=o.next()){var a=i.value;this.canvas.remove(a)}}catch(s){t={error:s}}finally{try{i&&!i.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),i=o.next();!i.done;i=o.next()){var a=i.value;this.canvas.bringToFront(a)}}catch(s){t={error:s}}finally{try{i&&!i.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),i=o.next();!i.done;i=o.next()){var a=i.value;this.canvas.sendToBack(a)}}catch(s){t={error:s}}finally{try{i&&!i.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(t){var e=this,n=this.divCanvasContainer;return this.setCanvasSize(n.clientWidth,n.clientHeight),new Promise(function(n,o){e.adjustCanvas(t),e.canvas.loadFromJSON(t,e.canvas.renderAll.bind(e.canvas)),e.canvas.renderAll(),n()})},t.prototype.adjustCanvas=function(t){var e,n,o=t.backgroundImage,i=this.divCanvasContainer,a=t.width,s=t.height,r=i.clientWidth,c=i.clientHeight;r/c<=a/s?(e=r/a,n=0):n=-(a*(e=c/s)-i.clientWidth)/2,this.left=n,o.scaleX*=e,o.scaleY*=e,this.setCanvasSize(a*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),i=o.next();!i.done;i=o.next()){i.value.set("dirty",!0)}}catch(a){t={error:a}}finally{try{i&&!i.done&&(e=o["return"])&&e.call(o)}finally{if(t)throw t.error}}},t.prototype.addSelectionRectangle=function(){this.cropRectangle=new n.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),i=Math.abs(t.offsetY-this.mousePosition.y);return!(!o||!i)&&(this.cropRectangle.set("top",n).set("left",e).set("width",o).set("height",i),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,i=this.cropRectangle.height,a=this.divCanvasContainer,s=a.clientWidth,r=a.clientHeight;t=s/r<=o/i?s/o:r/i,this.setCanvasSize(o*t,i*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),i=Math.min(e.clientY-n.top,this.mousePosition.y),a=Math.abs(e.clientX-n.left-this.mousePosition.x),s=Math.abs(e.clientY-n.top-this.mousePosition.y);return!(!a||!s)&&(this.cropRectangle.set("left",o).set("top",i).set("width",a).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,i,a=this.canvas.getObjects();try{for(var s=h(a),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&&(i=s["return"])&&i.call(s)}finally{if(o)throw o.error}}},t.prototype.groupSelectedObjects=function(){var t,e,o=this.canvas.getActiveObjects();if(o){var i=[];try{for(var a=h(o),s=a.next();!s.done;s=a.next()){var r=s.value;i.push(r)}}catch(l){t={error:l}}finally{try{s&&!s.done&&(e=a["return"])&&e.call(a)}finally{if(t)throw t.error}}this.deleteSelectedObjects();var c=new n.fabric.Group(i);this.canvas.add(c),c.setCoords(),this.canvas.setActiveObject(c),this.canvas.renderAll()}},t.prototype.setLastPanPosition=function(t){this.lastPanPosition=new n.fabric.Point(t.touches[0].clientX,t.touches[0].clientY)},t.prototype.panCanvas=function(t){var e=new n.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);(t[5]>=0||-e>t[5])&&(t[5]=t[5]>=0?0:-e);var n=this.canvas.width*(t[0]-1);(t[4]>=0||-n>t[4])&&(t[4]=t[4]>=0?0:-n)},t.prototype.zoom=function(t){if(Math.abs(t.overallVelocity)>.005){var e=new n.fabric.Point(t.center.x,t.center.y),o=this.canvas.getZoom();(o+=(t.scale-o)/20)<1?(o=1,this.canvas.zoomToPoint(new n.fabric.Point(0,0),o),this.canvas.absolutePan(new n.fabric.Point(0,0))):(o>10&&(o=10),this.canvas.zoomToPoint(e,o)),this.setFreeDrawingBrushWidthFromZoom(o),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 n.fabric.Point(0,0),1),this.canvas.absolutePan(new n.fabric.Point(0,0))},t=s([e.Injectable(),r("design:paramtypes",[])],t)}(),S="#000000",F="transparent",k=function(){function t(t,n,o){this.actionSheetCtrl=t,this.canvasManagerService=n,this.translate=o,this.canvas=new e.EventEmitter,this.strokeColor=S,this.fillColor=F,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(){},t.prototype.ngOnDestroy=function(){},Object.defineProperty(t.prototype,"hasPictograms",{get:function(){return!!this.pictograms},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,p[t]),this.emitCanvas()},t.prototype.addImage=function(t){this.disableAllStates(),this.canvasManagerService.addImage(this.pictogramsPath+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(){return c(this,void 0,void 0,function(){var t,e,n,o=this;return l(this,function(i){switch(i.label){case 0:return this.disableDrawing(),t=this.translate.instant("addGeometricShape"),e=this.translateShapeButtonsText(),n=0,[4,this.actionSheetCtrl.create({header:t,buttons:[{text:"   "+e[n++],handler:function(){o.canvasManagerService.addGeometricShape(o.strokeColor,o.fillColor,p.Rectangle)}},{text:"   "+e[n++],handler:function(){o.canvasManagerService.addGeometricShape(o.strokeColor,o.fillColor,p.Triangle)}},{text:"   "+e[n++],handler:function(){o.canvasManagerService.addGeometricShape(o.strokeColor,o.fillColor,p.Circle)}},{text:"   "+e[n++],handler:function(){o.canvasManagerService.addGeometricShape(o.strokeColor,o.fillColor,p.Line)}},{text:"   "+e[n++],handler:function(){o.canvasManagerService.addGeometricShape(o.strokeColor,o.fillColor,p.Cross)}},{text:"   "+e[n++],handler:function(){o.canvasManagerService.addText(o.strokeColor,"")}}]})];case 1:return[4,i.sent().present()];case 2:return i.sent(),[2]}})})},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(){return c(this,void 0,void 0,function(){var t,e,n,o=this;return l(this,function(i){switch(i.label){case 0:return this.disableDrawing(),t=this.translate.instant("edition"),e=this.translateEditButtonsText(),n=0,[4,this.actionSheetCtrl.create({header:t,buttons:[{text:" "+e[n++],handler:function(){o.crop()}},{text:"   "+e[n++],handler:function(){o.group()}},{text:"   "+e[n++],handler:function(){o.bringFoward()}},{text:"   "+e[n++],handler:function(){o.sendToBack()}},{text:"   "+e[n++],handler:function(){o.deleteSelection()}}]})];case 1:return[4,i.sent().present()];case 2:return i.sent(),[2]}})})},t.prototype.presentPictogramsActionSheet=function(){return c(this,void 0,void 0,function(){var t,e,n,o,i,a,s,r,c=this;return l(this,function(l){switch(l.label){case 0:for(this.disableDrawing(),t=[],e=[],n=this.pictograms,o=function(o){var a=document.createElement("style");a.type="text/css",a.innerHTML=".customCSSClass"+o+"{background: url('"+i.pictogramsPath+n[o]+"') no-repeat !important;padding-left:50px !important;height:80px; background-position: left center !important;}",document.getElementsByTagName("head")[0].appendChild(a),e.push(a),t.push({role:"destructive",text:n[o],cssClass:"customCSSClass"+o,handler:function(){c.addImage(n[o])}})},i=this,a=0;a<n.length;a++)o(a);return s=this.translate.instant("addPictogram"),[4,this.actionSheetCtrl.create({header:s,buttons:t})];case 1:return(r=l.sent()).onDidDismiss().then(function(){for(var t=0;t<e.length;t++)null!=e[t].parentNode&&e[t].parentNode.removeChild(e[t])}),[4,r.present()];case 2:return l.sent(),[2]}})})},t.prototype.emitCanvas=function(){this.canvas.emit(this.canvasManagerService.canvas)},s([e.ViewChild("pinchElement"),r("design:type",Object)],t.prototype,"element",void 0),s([e.Input(),r("design:type",String)],t.prototype,"imageData",void 0),s([e.Input(),r("design:type",String)],t.prototype,"loadedJson",void 0),s([e.Input(),r("design:type",String)],t.prototype,"pictogramsPath",void 0),s([e.Input(),r("design:type",Array)],t.prototype,"pictograms",void 0),s([e.Output(),r("design:type",Object)],t.prototype,"canvas",void 0),t=s([e.Component({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      <ion-button class="button-edit-toolbar" size="large" fill="clear" (click)="presentShapeActionSheet()">\n        <i class="fas fa-shapes" id="icon"></i>\n      </ion-button>\n\n      <ion-button class="button-edit-toolbar" size="large" fill="clear" (click)="presentPictogramsActionSheet()" *ngIf="hasPictograms">\n        <i class="fas fa-images" id="icon"></i>\n      </ion-button>\n\n      <ion-button class="button-edit-toolbar" size="large" fill="clear" (click)="presentEditActionSheet()">\n        <i class="fas fa-edit" id="icon"></i>\n      </ion-button>\n\n      <ion-button class="button-edit-toolbar" size="large" [fill]="!isDrawing ? \'clear\' : \'solid\'" (click)="draw()">\n        <i class="fas fa-pencil-alt" id="icon"></i>\n      </ion-button>\n\n      <ion-button class="button-edit-toolbar" size="large" fill="clear" (click)="onColorClicked()">\n        <i class="fas fa-palette" id="icon"></i>\n      </ion-button>\n\n      <ion-button class="button-edit-toolbar" size="large" [fill]="!isPanning ? \'clear\' : \'solid\'" (click)="onMoveClicked()">\n        <i class="fas fa-arrows-alt" id="icon"></i>\n      </ion-button>\n\n      <ion-button class="button-edit-toolbar" size="large" fill="clear" (click)="undo()" *ngIf="isUndoAvailable">\n        <i class="fas fa-undo" id="icon"></i>\n      </ion-button>\n\n    </div>\n  </ion-toolbar>\n</ion-footer>\n',providers:[m],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}"]}),r("design:paramtypes",[i.ActionSheetController,m,o.TranslateService])],t)}(),w=function(){function t(){}return t=s([e.NgModule({imports:[a.CommonModule,i.IonicModule],declarations:[k],providers:[m],exports:[k]})],t)}();t.CanvasManagerService=m,t.MobileSketchToolComponent=k,t.SketchToolModule=w,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=lib-sketch-tool.umd.min.js.map