{"__symbolic":"module","version":4,"metadata":{"SketchToolModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule"},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule"},{"__symbolic":"reference","module":"ionic-angular","name":"IonicModule"}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵd"}],"exports":[{"__symbolic":"reference","name":"ɵd"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[libCanvasClick]"}]}],"members":{"mouseUp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"mouseDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"mouseMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onMouseUp":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mouseup",["$event"]]}]}],"onMouseDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mousedown",["$event"]]}]}],"onMouseMouve":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mousemove",["$event"]]}]}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"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":[{"__symbolic":"reference","name":"ɵc"}]}]}],"members":{"imgUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵc"}]}],"ngOnInit":[{"__symbolic":"method"}],"addText":[{"__symbolic":"method"}],"addShape":[{"__symbolic":"method"}],"addImage":[{"__symbolic":"method"}],"changeFillColor":[{"__symbolic":"method"}],"changeStrokeColor":[{"__symbolic":"method"}],"bringFoward":[{"__symbolic":"method"}],"sendToBack":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"saveImage":[{"__symbolic":"method"}],"crop":[{"__symbolic":"method"}],"keyEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:keyup",["$event"]]}]}],"deleteSelection":[{"__symbolic":"method"}],"mouseUp":[{"__symbolic":"method"}],"mouseMove":[{"__symbolic":"method"}],"mouseDown":[{"__symbolic":"method"}],"group":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"emptyCanvas":[{"__symbolic":"method"}],"loadNewImage":[{"__symbolic":"method"}],"renderCanvas":[{"__symbolic":"method"}],"addGeometricShape":[{"__symbolic":"method"}],"addRectangle":[{"__symbolic":"method"}],"addCircle":[{"__symbolic":"method"}],"addTriangle":[{"__symbolic":"method"}],"addHorizontalLine":[{"__symbolic":"method"}],"createHorizontalLine":[{"__symbolic":"method"}],"createVerticalLine":[{"__symbolic":"method"}],"addCross":[{"__symbolic":"method"}],"toggleFreeDrawing":[{"__symbolic":"method"}],"setFreeDrawingBrushColor":[{"__symbolic":"method"}],"addText":[{"__symbolic":"method"}],"addImage":[{"__symbolic":"method"}],"setBackgroundFromURL":[{"__symbolic":"method"}],"resizeCanvasAndComputeScaleFactor":[{"__symbolic":"method"}],"changeSelectedObjectsFillColor":[{"__symbolic":"method"}],"changeSelectedObjectsStrokeColor":[{"__symbolic":"method"}],"deleteSelectedObjects":[{"__symbolic":"method"}],"bringSelectedObjectsToFront":[{"__symbolic":"method"}],"sendSelectedObjectsToBack":[{"__symbolic":"method"}],"exportImageAsDataURL":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"getIndexOf":[{"__symbolic":"method"}],"jsonFromCanvas":[{"__symbolic":"method"}],"loadfromJson":[{"__symbolic":"method"}],"selectLastObject":[{"__symbolic":"method"}],"markSelectedObjectsDirty":[{"__symbolic":"method"}],"addSelectionRectangle":[{"__symbolic":"method"}],"ajustCropRectanglFromMouse":[{"__symbolic":"method"}],"startSelectingCropRectangleFromMouse":[{"__symbolic":"method"}],"cropImage":[{"__symbolic":"method"}],"ajustCropRectangle":[{"__symbolic":"method"}],"startSelectingCropRectangle":[{"__symbolic":"method"}],"disableSelection":[{"__symbolic":"method"}],"moveAllObjectsInCanvas":[{"__symbolic":"method"}],"groupSelectedObjects":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"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')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#663300\" (tap)=\"setColor('#663300')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#666600\" (tap)=\"setColor('#666600')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#006600\" (tap)=\"setColor('#006600')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#000066\" (tap)=\"setColor('#000066')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#660066\" (tap)=\"setColor('#660066')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#000000\" (tap)=\"setColor('#000000')\">&nbsp;</ion-col>\n            </ion-row>\n            <ion-row>\n                <ion-col style=\"background:#CC0000\" (tap)=\"setColor('#CC0000')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#CC6600\" (tap)=\"setColor('#CC6600')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#CCCC00\" (tap)=\"setColor('#CCCC00')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#00CC00\" (tap)=\"setColor('#00CC00')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#0000CC\" (tap)=\"setColor('#0000CC')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#CC00CC\" (tap)=\"setColor('#CC00CC')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#606060\" (tap)=\"setColor('#606060')\">&nbsp;</ion-col>\n            </ion-row>\n            <ion-row>\n                <ion-col style=\"background:#FF0000\" (tap)=\"setColor('#FF0000')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#FF8000\" (tap)=\"setColor('#FF8000')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#FFFF00\" (tap)=\"setColor('#FFFF00')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#00FF00\" (tap)=\"setColor('#00FF00')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#0000FF\" (tap)=\"setColor('#0000FF')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#FF00FF\" (tap)=\"setColor('#FF00FF')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#808080\" (tap)=\"setColor('#808080')\">&nbsp;</ion-col>\n            </ion-row>\n            <ion-row>\n                <ion-col style=\"background:#FF6666\" (tap)=\"setColor('#FF6666')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#FFB266\" (tap)=\"setColor('#FFB266')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#FFFF66\" (tap)=\"setColor('#FFFF66')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#66FF66\" (tap)=\"setColor('#66FF66')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#6666FF\" (tap)=\"setColor('#6666FF')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#FF66FF\" (tap)=\"setColor('#FF66FF')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#C0C0C0\" (tap)=\"setColor('#C0C0C0')\">&nbsp;</ion-col>\n            </ion-row>\n            <ion-row>\n                <ion-col style=\"background:#FF9999\" (tap)=\"setColor('#FF9999')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#FFCC99\" (tap)=\"setColor('#FFCC99')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#FFFF99\" (tap)=\"setColor('#FFFF99')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#99FF99\" (tap)=\"setColor('#99FF99')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#9999FF\" (tap)=\"setColor('#9999FF')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#FF99FF\" (tap)=\"setColor('#FF99FF')\">&nbsp;</ion-col>\n                <ion-col style=\"background:#FFFFFF\" (tap)=\"setColor('#FFFFFF')\">&nbsp;</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":[{"__symbolic":"reference","name":"ɵc"}]}]}],"members":{"imageData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"loadedJson":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"iconsPath":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"icons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"json":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ionic-angular","name":"ActionSheetController"},{"__symbolic":"reference","name":"ɵc"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"addText":[{"__symbolic":"method"}],"addShape":[{"__symbolic":"method"}],"addImage":[{"__symbolic":"method"}],"changeStrokeColor":[{"__symbolic":"method"}],"bringFoward":[{"__symbolic":"method"}],"sendToBack":[{"__symbolic":"method"}],"saveImage":[{"__symbolic":"method"}],"crop":[{"__symbolic":"method"}],"deleteSelection":[{"__symbolic":"method"}],"mouseUp":[{"__symbolic":"method"}],"mouseMove":[{"__symbolic":"method"}],"mouseDown":[{"__symbolic":"method"}],"group":[{"__symbolic":"method"}],"undo":[{"__symbolic":"method"}],"computeJson":[{"__symbolic":"method"}],"presentShapeActionSheet":[{"__symbolic":"method"}],"presentEditActionSheet":[{"__symbolic":"method"}],"presentPictogramsActionSheet":[{"__symbolic":"method"}],"onColorClicked":[{"__symbolic":"method"}],"setColor":[{"__symbolic":"method"}]}}},"origins":{"SketchToolModule":"./src/app/lib-sketch-tool/sketch-tool.module","ɵa":"./src/app/lib-sketch-tool/directives/canvas-click.directive","ɵb":"./src/app/lib-sketch-tool/web-component/web-sketch-tool.component","ɵc":"./src/app/lib-sketch-tool/services/canvas-manager.service","ɵd":"./src/app/lib-sketch-tool/mobile-component/mobile-sketch-tool.component"},"importAs":"lib-sketch-tool"}