lib-sketch-tool/lib-sketch-tool.metadata.json

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

{"__symbolic":"module","version":4,"metadata":{"MobileSketchToolComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"lib-mobile-sketch-tool","providers":[{"__symbolic":"reference","name":"CanvasManagerService"}],"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","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}"]}]}],"members":{"element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":19,"character":3},"arguments":["pinchElement"]}]}],"imageData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"loadedJson":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"pictogramsPath":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"pictograms":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":34,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ionic/angular","name":"ActionSheetController","line":42,"character":28},{"__symbolic":"reference","name":"CanvasManagerService"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":44,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"addText":[{"__symbolic":"method"}],"addShape":[{"__symbolic":"method"}],"addImage":[{"__symbolic":"method"}],"changeStrokeColor":[{"__symbolic":"method"}],"bringFoward":[{"__symbolic":"method"}],"sendToBack":[{"__symbolic":"method"}],"crop":[{"__symbolic":"method"}],"disableCroppping":[{"__symbolic":"method"}],"deleteSelection":[{"__symbolic":"method"}],"mouseUp":[{"__symbolic":"method"}],"mouseMove":[{"__symbolic":"method"}],"mouseDown":[{"__symbolic":"method"}],"pinch":[{"__symbolic":"method"}],"group":[{"__symbolic":"method"}],"undo":[{"__symbolic":"method"}],"onColorClicked":[{"__symbolic":"method"}],"onMoveClicked":[{"__symbolic":"method"}],"disablePanning":[{"__symbolic":"method"}],"disableAllStates":[{"__symbolic":"method"}],"stopPanning":[{"__symbolic":"method"}],"setColor":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"disableDrawing":[{"__symbolic":"method"}],"translateShapeButtonsText":[{"__symbolic":"method"}],"presentShapeActionSheet":[{"__symbolic":"method"}],"translateEditButtonsText":[{"__symbolic":"method"}],"presentEditActionSheet":[{"__symbolic":"method"}],"presentPictogramsActionSheet":[{"__symbolic":"method"}],"emitCanvas":[{"__symbolic":"method"}]}},"CanvasManagerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":17,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"createCanvas":[{"__symbolic":"method"}],"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"}],"setFreeDrawingBrushWidthFromZoom":[{"__symbolic":"method"}],"addText":[{"__symbolic":"method"}],"addImage":[{"__symbolic":"method"}],"setBackgroundFromURL":[{"__symbolic":"method"}],"computeScaleFactor":[{"__symbolic":"method"}],"onOrientationChange":[{"__symbolic":"method"}],"changeSelectedObjectsFillColor":[{"__symbolic":"method"}],"changeSelectedObjectsStrokeColor":[{"__symbolic":"method"}],"deleteSelectedObjects":[{"__symbolic":"method"}],"bringSelectedObjectsToFront":[{"__symbolic":"method"}],"sendSelectedObjectsToBack":[{"__symbolic":"method"}],"jsonFromCanvas":[{"__symbolic":"method"}],"loadfromJson":[{"__symbolic":"method"}],"adjustCanvas":[{"__symbolic":"method"}],"exportImageAsDataURL":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"getIndexOf":[{"__symbolic":"method"}],"markSelectedObjectsDirty":[{"__symbolic":"method"}],"addSelectionRectangle":[{"__symbolic":"method"}],"ajustCropRectangleFromMouse":[{"__symbolic":"method"}],"startSelectingCropRectangleFromMouse":[{"__symbolic":"method"}],"cropImage":[{"__symbolic":"method"}],"enableSlection":[{"__symbolic":"method"}],"ajustCropRectangle":[{"__symbolic":"method"}],"startSelectingCropRectangle":[{"__symbolic":"method"}],"disableSelection":[{"__symbolic":"method"}],"moveAllObjectsInCanvas":[{"__symbolic":"method"}],"groupSelectedObjects":[{"__symbolic":"method"}],"setLastPanPosition":[{"__symbolic":"method"}],"panCanvas":[{"__symbolic":"method"}],"preventPanOutsideCanvas":[{"__symbolic":"method"}],"zoom":[{"__symbolic":"method"}],"setCanvasSize":[{"__symbolic":"method"}],"resetZoom":[{"__symbolic":"method"}]}},"SketchToolModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@ionic/angular","name":"IonicModule","line":8,"character":26}],"declarations":[{"__symbolic":"reference","name":"MobileSketchToolComponent"}],"providers":[{"__symbolic":"reference","name":"CanvasManagerService"}],"exports":[{"__symbolic":"reference","name":"MobileSketchToolComponent"}]}]}],"members":{}}},"origins":{"MobileSketchToolComponent":"./app/lib-sketch-tool/mobile-component/mobile-sketch-tool.component","CanvasManagerService":"./app/lib-sketch-tool/services/canvas-manager.service","SketchToolModule":"./app/lib-sketch-tool/sketch-tool.module"},"importAs":"lib-sketch-tool"}