lib-sketch-tool
Version:
## Installing with npm $ npm install --save lib-sketch-tool
1,094 lines (1,090 loc) • 55.4 kB
JavaScript
import { __values, __decorate, __metadata, __awaiter, __generator } from 'tslib';
import { Injectable, ViewChild, Input, Output, Component, EventEmitter, NgModule } from '@angular/core';
import { fabric } from 'fabric';
import { TranslateService } from '@ngx-translate/core';
import { ActionSheetController, IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
var AvailableGeometricShape;
(function (AvailableGeometricShape) {
AvailableGeometricShape[AvailableGeometricShape["Rectangle"] = 0] = "Rectangle";
AvailableGeometricShape[AvailableGeometricShape["Circle"] = 1] = "Circle";
AvailableGeometricShape[AvailableGeometricShape["Triangle"] = 2] = "Triangle";
AvailableGeometricShape[AvailableGeometricShape["Line"] = 3] = "Line";
AvailableGeometricShape[AvailableGeometricShape["Cross"] = 4] = "Cross";
})(AvailableGeometricShape || (AvailableGeometricShape = {}));
var SHAPE_DATA = {
width: 200,
height: 200,
left: 50,
top: 50,
radius: 100,
stroke: 10,
freeDrawingBrushWidth: 10,
cornerSize: 20
};
var CanvasManagerService = /** @class */ (function () {
function CanvasManagerService() {
this.canvasId = 'canvas';
this.mousePosition = { x: 0, y: 0 };
this.left = 0;
}
Object.defineProperty(CanvasManagerService.prototype, "canvasObjects", {
get: function () {
return this.canvas.getObjects();
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasManagerService.prototype, "canvasBackgroundImage", {
get: function () {
return this.canvas.backgroundImage;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasManagerService.prototype, "activeObject", {
get: function () {
return this.canvas.getActiveObject();
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasManagerService.prototype, "activeGroup", {
get: function () {
return this.canvas.getActiveObjects();
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasManagerService.prototype, "divCanvasContainer", {
get: function () {
var collection = document.getElementsByClassName('div-canvas-container');
return collection[collection.length - 1];
},
enumerable: true,
configurable: true
});
CanvasManagerService.prototype.createCanvas = function (canvasId) {
this.canvasId = canvasId;
this.canvas = new fabric.Canvas(this.canvasId);
};
CanvasManagerService.prototype.emptyCanvas = function () {
if (this.canvas) {
this.canvas.dispose();
}
this.canvas = new fabric.Canvas(this.canvasId);
this.canvas.clear();
this.canvas.remove(this.canvas.getObjects());
};
CanvasManagerService.prototype.loadNewImage = function (backgroundImageURL) {
this.emptyCanvas();
if (backgroundImageURL) {
this.setBackgroundFromURL(backgroundImageURL);
}
};
CanvasManagerService.prototype.renderCanvas = function () {
this.markSelectedObjectsDirty();
this.canvas.renderAll();
};
CanvasManagerService.prototype.addGeometricShape = function (strokeColor, fillColor, shape) {
switch (shape) {
case AvailableGeometricShape.Rectangle:
this.addRectangle(strokeColor, fillColor);
break;
case AvailableGeometricShape.Circle:
this.addCircle(strokeColor, fillColor);
break;
case AvailableGeometricShape.Triangle:
this.addTriangle(strokeColor, fillColor);
break;
case AvailableGeometricShape.Line:
this.addHorizontalLine(strokeColor, fillColor);
break;
case AvailableGeometricShape.Cross:
this.addCross(strokeColor, fillColor);
break;
}
};
CanvasManagerService.prototype.addRectangle = function (strokeColor, fillColor) {
this.canvas.add(new fabric.Rect({
width: SHAPE_DATA.width,
height: SHAPE_DATA.height,
left: SHAPE_DATA.left,
top: SHAPE_DATA.top,
fill: fillColor,
stroke: strokeColor,
strokeWidth: SHAPE_DATA.stroke,
cornerSize: SHAPE_DATA.cornerSize
}));
};
CanvasManagerService.prototype.addCircle = function (strokeColor, fillColor) {
this.canvas.add(new fabric.Circle({
left: SHAPE_DATA.left,
top: SHAPE_DATA.top,
radius: SHAPE_DATA.radius,
stroke: strokeColor,
strokeWidth: SHAPE_DATA.stroke,
fill: fillColor,
cornerSize: SHAPE_DATA.cornerSize
}));
};
CanvasManagerService.prototype.addTriangle = function (strokeColor, fillColor) {
this.canvas.add(new fabric.Triangle({
width: SHAPE_DATA.width,
height: SHAPE_DATA.height,
left: SHAPE_DATA.left,
top: SHAPE_DATA.top,
fill: fillColor,
stroke: strokeColor,
strokeWidth: SHAPE_DATA.stroke,
cornerSize: SHAPE_DATA.cornerSize
}));
};
CanvasManagerService.prototype.addHorizontalLine = function (strokeColor, fillColor) {
this.canvas.add(this.createHorizontalLine(strokeColor));
};
CanvasManagerService.prototype.createHorizontalLine = function (strokeColor) {
var line = new fabric.Line([100, 150, 200, 150], {
left: 50,
top: 100,
stroke: strokeColor,
strokeWidth: 5,
cornerSize: SHAPE_DATA.cornerSize
});
line.setControlsVisibility({
bl: false,
br: false,
tl: false,
tr: false,
mt: false,
mb: false
});
return line;
};
CanvasManagerService.prototype.createVerticalLine = function (strokeColor) {
var line = new fabric.Line([150, 100, 150, 200], {
left: 100,
top: 50,
stroke: strokeColor,
strokeWidth: 5,
cornerSize: SHAPE_DATA.cornerSize
});
line.setControlsVisibility({
bl: false,
br: false,
tl: false,
tr: false,
ml: false,
mr: false
});
return line;
};
CanvasManagerService.prototype.addCross = function (strokeColor, fillColor) {
var horizontalLine = this.createHorizontalLine(strokeColor);
var verticalLine = this.createVerticalLine(strokeColor);
this.canvas.add(horizontalLine);
this.canvas.add(verticalLine);
};
CanvasManagerService.prototype.toggleFreeDrawing = function () {
this.canvas.isDrawingMode = !this.canvas.isDrawingMode;
};
CanvasManagerService.prototype.setFreeDrawingBrushColor = function (color) {
this.canvas.freeDrawingBrush.color = color;
this.setFreeDrawingBrushWidthFromZoom(this.canvas.getZoom());
};
CanvasManagerService.prototype.setFreeDrawingBrushWidthFromZoom = function (zoom) {
this.canvas.freeDrawingBrush.width = SHAPE_DATA.freeDrawingBrushWidth * (1 / zoom);
};
CanvasManagerService.prototype.addText = function (color, inputText) {
var text = new fabric.IText('text', {
fontFamily: 'arial black',
fontStyle: 'bold',
left: SHAPE_DATA.left,
top: SHAPE_DATA.top,
cornerSize: SHAPE_DATA.cornerSize
});
text.setColor(color);
this.canvas.add(text);
};
CanvasManagerService.prototype.addImage = function (imageURL) {
var _this = this;
return new Promise(function (resolve, reject) {
var canvas = _this.canvas;
var image = new Image();
image.onload = function (img) {
var fabricImage = new fabric.Image(image, {
angle: 0,
width: image.width,
height: image.height,
left: SHAPE_DATA.left,
top: SHAPE_DATA.top,
scaleX: 1,
scaleY: 1,
cornerSize: SHAPE_DATA.cornerSize
});
canvas.add(fabricImage);
resolve();
};
image.src = imageURL;
});
};
CanvasManagerService.prototype.setBackgroundFromURL = function (backgroundImageURL) {
var _this = this;
var container = this.divCanvasContainer;
this.setCanvasSize(container.clientWidth, container.clientHeight);
return new Promise(function (resolve, reject) {
if (backgroundImageURL == null) {
return reject();
}
var image = new Image();
image.onload = function () {
var f_img = new fabric.Image(image, {});
var scaleData = _this.computeScaleFactor(f_img, _this.canvas);
_this.canvas.setBackgroundImage(f_img, _this.canvas.renderAll.bind(_this.canvas), {
scaleX: scaleData.scaleFactor,
scaleY: scaleData.scaleFactor
});
_this.setCanvasSize(f_img.width * scaleData.scaleFactor, f_img.height * scaleData.scaleFactor);
_this.canvas.renderAll();
resolve();
};
image.src = backgroundImageURL;
});
};
CanvasManagerService.prototype.computeScaleFactor = function (f_img, canvas) {
var container = this.divCanvasContainer;
var canvasAspect = container.clientWidth / container.clientHeight;
var imgAspect = f_img.width / f_img.height;
var left, top, scaleFactor;
if (canvasAspect <= imgAspect) {
scaleFactor = container.clientWidth / f_img.width;
left = 0;
top = -(f_img.height * scaleFactor - container.clientHeight) / 2;
}
else {
scaleFactor = container.clientHeight / f_img.height;
top = 0;
left = -(f_img.width * scaleFactor - container.clientWidth) / 2;
}
this.left = left;
return { scaleFactor: scaleFactor, left: left, top: top };
};
CanvasManagerService.prototype.onOrientationChange = function () {
this.mousePosition = { x: this.canvas.getWidth, y: this.canvas.getHeight };
this.cropImage();
};
CanvasManagerService.prototype.changeSelectedObjectsFillColor = function (color) {
var e_1, _a;
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
try {
for (var activeObjects_1 = __values(activeObjects), activeObjects_1_1 = activeObjects_1.next(); !activeObjects_1_1.done; activeObjects_1_1 = activeObjects_1.next()) {
var object = activeObjects_1_1.value;
object.setColor(color);
this.canvas.renderAll();
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (activeObjects_1_1 && !activeObjects_1_1.done && (_a = activeObjects_1.return)) _a.call(activeObjects_1);
}
finally { if (e_1) throw e_1.error; }
}
}
};
CanvasManagerService.prototype.changeSelectedObjectsStrokeColor = function (color) {
var e_2, _a;
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
try {
for (var activeObjects_2 = __values(activeObjects), activeObjects_2_1 = activeObjects_2.next(); !activeObjects_2_1.done; activeObjects_2_1 = activeObjects_2.next()) {
var object = activeObjects_2_1.value;
if (object.type === 'i-text') {
object.setColor(color);
}
else {
object.stroke = color;
object.set('dirty', true);
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (activeObjects_2_1 && !activeObjects_2_1.done && (_a = activeObjects_2.return)) _a.call(activeObjects_2);
}
finally { if (e_2) throw e_2.error; }
}
this.canvas.renderAll();
}
};
CanvasManagerService.prototype.deleteSelectedObjects = function () {
var e_3, _a;
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
try {
for (var activeObjects_3 = __values(activeObjects), activeObjects_3_1 = activeObjects_3.next(); !activeObjects_3_1.done; activeObjects_3_1 = activeObjects_3.next()) {
var object = activeObjects_3_1.value;
this.canvas.remove(object);
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (activeObjects_3_1 && !activeObjects_3_1.done && (_a = activeObjects_3.return)) _a.call(activeObjects_3);
}
finally { if (e_3) throw e_3.error; }
}
this.canvas.discardActiveObject();
this.canvas.renderAll();
}
};
CanvasManagerService.prototype.bringSelectedObjectsToFront = function () {
var e_4, _a;
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
try {
for (var activeObjects_4 = __values(activeObjects), activeObjects_4_1 = activeObjects_4.next(); !activeObjects_4_1.done; activeObjects_4_1 = activeObjects_4.next()) {
var object = activeObjects_4_1.value;
this.canvas.bringToFront(object);
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (activeObjects_4_1 && !activeObjects_4_1.done && (_a = activeObjects_4.return)) _a.call(activeObjects_4);
}
finally { if (e_4) throw e_4.error; }
}
}
};
CanvasManagerService.prototype.sendSelectedObjectsToBack = function () {
var e_5, _a;
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
try {
for (var activeObjects_5 = __values(activeObjects), activeObjects_5_1 = activeObjects_5.next(); !activeObjects_5_1.done; activeObjects_5_1 = activeObjects_5.next()) {
var object = activeObjects_5_1.value;
this.canvas.sendToBack(object);
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (activeObjects_5_1 && !activeObjects_5_1.done && (_a = activeObjects_5.return)) _a.call(activeObjects_5);
}
finally { if (e_5) throw e_5.error; }
}
}
};
CanvasManagerService.prototype.jsonFromCanvas = function () {
return this.canvas.toJSON(['width', 'height']);
};
CanvasManagerService.prototype.loadfromJson = function (json) {
var _this = this;
var container = this.divCanvasContainer;
this.setCanvasSize(container.clientWidth, container.clientHeight);
return new Promise(function (resolve, reject) {
_this.adjustCanvas(json);
_this.canvas.loadFromJSON(json, _this.canvas.renderAll.bind(_this.canvas));
_this.canvas.renderAll();
resolve();
});
};
CanvasManagerService.prototype.adjustCanvas = function (json) {
var backgroundImage = json['backgroundImage'];
var container = this.divCanvasContainer;
var width = json['width'];
var height = json['height'];
var canvasWidth = container.clientWidth;
var canvasHeight = container.clientHeight;
var canvasAspect = canvasWidth / canvasHeight;
var imgAspect = width / height;
var scaleFactor, left;
if (canvasAspect <= imgAspect) {
scaleFactor = canvasWidth / width;
left = 0;
}
else {
scaleFactor = canvasHeight / height;
left = -(width * scaleFactor - container.clientWidth) / 2;
}
this.left = left;
backgroundImage['scaleX'] *= scaleFactor;
backgroundImage['scaleY'] *= scaleFactor;
this.setCanvasSize(width * scaleFactor, height * scaleFactor);
var objects = json['objects'];
for (var i = 0; i < objects.length; i++) {
objects[i]['left'] *= scaleFactor;
objects[i]['top'] *= scaleFactor;
objects[i]['scaleX'] *= scaleFactor;
objects[i]['scaleY'] *= scaleFactor;
}
};
CanvasManagerService.prototype.exportImageAsDataURL = function () {
return this.canvas.toDataURL('image/png');
};
CanvasManagerService.prototype.selectItem = function (itemNumber) {
this.canvas.setActiveObject(this.canvas.item(itemNumber));
};
CanvasManagerService.prototype.getIndexOf = function (activeObject) {
return this.canvas.getObjects().indexOf(activeObject);
};
CanvasManagerService.prototype.markSelectedObjectsDirty = function () {
var e_6, _a;
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
try {
for (var activeObjects_6 = __values(activeObjects), activeObjects_6_1 = activeObjects_6.next(); !activeObjects_6_1.done; activeObjects_6_1 = activeObjects_6.next()) {
var object = activeObjects_6_1.value;
object.set('dirty', true);
}
}
catch (e_6_1) { e_6 = { error: e_6_1 }; }
finally {
try {
if (activeObjects_6_1 && !activeObjects_6_1.done && (_a = activeObjects_6.return)) _a.call(activeObjects_6);
}
finally { if (e_6) throw e_6.error; }
}
}
};
CanvasManagerService.prototype.addSelectionRectangle = function () {
this.cropRectangle = new fabric.Rect({
fill: 'transparent',
originX: 'left',
originY: 'top',
stroke: '#ccc',
strokeDashArray: [2, 2],
opacity: 1,
width: 0,
height: 0
});
this.cropRectangle.visible = false;
this.canvas.add(this.cropRectangle);
};
CanvasManagerService.prototype.ajustCropRectangleFromMouse = function (event) {
var x = Math.min(event.offsetX, this.mousePosition.x), y = Math.min(event.offsetY, this.mousePosition.y), w = Math.abs(event.offsetX - this.mousePosition.x), h = Math.abs(event.offsetY - this.mousePosition.y);
if (!w || !h) {
return false;
}
this.cropRectangle
.set('top', y)
.set('left', x)
.set('width', w)
.set('height', h);
this.canvas.renderAll();
return true;
};
CanvasManagerService.prototype.startSelectingCropRectangleFromMouse = function (event) {
this.cropRectangle.left = event.offsetX;
this.cropRectangle.top = event.offsetY;
this.cropRectangle.setCoords();
this.mousePosition = { x: event.offsetX, y: event.offsetY };
this.cropRectangle.visible = true;
this.canvas.bringToFront(this.cropRectangle);
};
CanvasManagerService.prototype.cropImage = function () {
var left = this.cropRectangle.left;
var top = this.cropRectangle.top;
var width = this.cropRectangle.width;
var height = this.cropRectangle.height;
var container = this.divCanvasContainer;
var canvasWidth = container.clientWidth;
var canvasHeight = container.clientHeight;
var canvasAspect = canvasWidth / canvasHeight;
var imgAspect = width / height;
var scaleFactor;
if (canvasAspect <= imgAspect) {
scaleFactor = canvasWidth / width;
}
else {
scaleFactor = canvasHeight / height;
}
this.setCanvasSize(width * scaleFactor, height * scaleFactor);
this.canvas.backgroundImage.scaleX *= scaleFactor;
this.canvas.backgroundImage.scaleY *= scaleFactor;
this.canvas.backgroundImage.left -= left;
this.canvas.backgroundImage.left *= scaleFactor;
this.canvas.backgroundImage.top -= top - scaleFactor;
this.canvas.backgroundImage.top *= scaleFactor;
this.moveAllObjectsInCanvas(-1 * left, -1 * top, scaleFactor);
this.enableSlection();
this.cropRectangle.visible = false;
this.canvas.remove(this.cropRectangle);
this.canvas.renderAll();
};
CanvasManagerService.prototype.enableSlection = function () {
this.canvas.selectable = true;
this.canvas.selection = true;
};
CanvasManagerService.prototype.ajustCropRectangle = function (event) {
var touch = event.touches[0];
var rect = event.target.getBoundingClientRect();
var x = Math.min(touch.clientX - rect.left, this.mousePosition.x), y = Math.min(touch.clientY - rect.top, this.mousePosition.y), w = Math.abs(touch.clientX - rect.left - this.mousePosition.x), h = Math.abs(touch.clientY - rect.top - this.mousePosition.y);
if (!w || !h) {
return false;
}
this.cropRectangle
.set('left', x)
.set('top', y)
.set('width', w)
.set('height', h);
this.canvas.renderAll();
return true;
};
CanvasManagerService.prototype.startSelectingCropRectangle = function (event) {
var touch = event.touches[0];
var rect = event.target.getBoundingClientRect();
this.cropRectangle.left = touch.clientX - rect.left;
this.cropRectangle.top = touch.clientY - rect.top;
this.cropRectangle.setCoords();
this.mousePosition = { x: touch.clientX - rect.left, y: touch.clientY - rect.top };
this.canvas.renderAll();
this.cropRectangle.visible = true;
this.canvas.bringToFront(this.cropRectangle);
};
CanvasManagerService.prototype.disableSelection = function () {
this.canvas.selection = false;
};
CanvasManagerService.prototype.moveAllObjectsInCanvas = function (x, y, scaleFactor) {
var e_7, _a;
var objects = this.canvas.getObjects();
try {
for (var objects_1 = __values(objects), objects_1_1 = objects_1.next(); !objects_1_1.done; objects_1_1 = objects_1.next()) {
var obj = objects_1_1.value;
obj.left += x;
obj.left *= scaleFactor;
obj.scaleX *= scaleFactor;
obj.top += y;
obj.scaleY *= scaleFactor;
obj.top *= scaleFactor;
obj.setCoords();
}
}
catch (e_7_1) { e_7 = { error: e_7_1 }; }
finally {
try {
if (objects_1_1 && !objects_1_1.done && (_a = objects_1.return)) _a.call(objects_1);
}
finally { if (e_7) throw e_7.error; }
}
};
CanvasManagerService.prototype.groupSelectedObjects = function () {
var e_8, _a;
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
var objects = [];
try {
for (var activeObjects_7 = __values(activeObjects), activeObjects_7_1 = activeObjects_7.next(); !activeObjects_7_1.done; activeObjects_7_1 = activeObjects_7.next()) {
var object = activeObjects_7_1.value;
objects.push(object);
}
}
catch (e_8_1) { e_8 = { error: e_8_1 }; }
finally {
try {
if (activeObjects_7_1 && !activeObjects_7_1.done && (_a = activeObjects_7.return)) _a.call(activeObjects_7);
}
finally { if (e_8) throw e_8.error; }
}
this.deleteSelectedObjects();
var group = new fabric.Group(objects);
this.canvas.add(group);
group.setCoords();
this.canvas.setActiveObject(group);
this.canvas.renderAll();
}
};
CanvasManagerService.prototype.setLastPanPosition = function (event) {
this.lastPanPosition = new fabric.Point(event.touches[0].clientX, event.touches[0].clientY);
};
CanvasManagerService.prototype.panCanvas = function (event) {
var delta = new fabric.Point(event.touches[0].clientX - this.lastPanPosition.x, event.touches[0].clientY - this.lastPanPosition.y);
this.canvas.relativePan(delta);
this.preventPanOutsideCanvas();
this.canvas.renderAll();
this.setLastPanPosition(event);
};
CanvasManagerService.prototype.preventPanOutsideCanvas = function () {
var canvasViewPort = this.canvas.viewportTransform;
var bottomEndPoint = this.canvas.height * (canvasViewPort[0] - 1);
if (canvasViewPort[5] >= 0 || -bottomEndPoint > canvasViewPort[5]) {
canvasViewPort[5] = (canvasViewPort[5] >= 0) ? 0 : -bottomEndPoint;
}
var rightEndPoint = this.canvas.width * (canvasViewPort[0] - 1);
if (canvasViewPort[4] >= 0 || -rightEndPoint > canvasViewPort[4]) {
canvasViewPort[4] = (canvasViewPort[4] >= 0) ? 0 : -rightEndPoint;
}
};
CanvasManagerService.prototype.zoom = function (event) {
if (Math.abs(event.overallVelocity) > 0.005) {
var point = new fabric.Point(event.center.x, event.center.y);
var zoom = this.canvas.getZoom();
zoom = zoom + (event.scale - zoom) / 20;
if (zoom < 1) {
zoom = 1;
this.canvas.zoomToPoint(new fabric.Point(0, 0), zoom);
this.canvas.absolutePan(new fabric.Point(0, 0));
}
else {
if (zoom > 10) {
zoom = 10;
}
this.canvas.zoomToPoint(point, zoom);
}
this.setFreeDrawingBrushWidthFromZoom(zoom);
this.canvas.renderAll();
}
};
CanvasManagerService.prototype.setCanvasSize = function (width, height) {
this.canvas.setWidth(width);
this.canvas.setHeight(height);
};
CanvasManagerService.prototype.resetZoom = function () {
this.canvas.zoomToPoint(new fabric.Point(0, 0), 1);
this.canvas.absolutePan(new fabric.Point(0, 0));
};
CanvasManagerService = __decorate([
Injectable(),
__metadata("design:paramtypes", [])
], CanvasManagerService);
return CanvasManagerService;
}());
//import { GestureController } from ‘@ionic/core/dist/collection/utils/gesture/gesture-controller’;
var Black = '#000000';
var Transparent = 'transparent';
var MobileSketchToolComponent = /** @class */ (function () {
function MobileSketchToolComponent(actionSheetCtrl, canvasManagerService, translate) {
this.actionSheetCtrl = actionSheetCtrl;
this.canvasManagerService = canvasManagerService;
this.translate = translate;
this.canvas = new EventEmitter();
this.strokeColor = Black;
this.fillColor = Transparent;
this.isCropping = false;
this.isPanning = false;
this.isLoaded = false;
this.isUndoAvailable = false;
this.isSelectingColor = false;
}
MobileSketchToolComponent.prototype.ngOnInit = function () {
if (this.imageData) {
this.canvasManagerService.emptyCanvas();
if (this.loadedJson == null || this.loadedJson.length < 10) {
this.canvasManagerService.setBackgroundFromURL(this.imageData);
}
else {
this.previousJson = JSON.parse(this.loadedJson);
this.currentJson = this.previousJson;
this.canvasManagerService
.loadfromJson(JSON.parse(this.loadedJson));
}
this.isLoaded = true;
this.previousImageData = this.imageData;
}
this.emitCanvas();
};
MobileSketchToolComponent.prototype.ngOnChanges = function () {
if (this.isLoaded) {
if (this.loadedJson === null || this.loadedJson.length < 10 || this.imageData !== this.previousImageData) {
this.canvasManagerService.emptyCanvas();
this.canvasManagerService.setBackgroundFromURL(this.imageData);
this.previousImageData = this.imageData;
this.currentJson = null;
}
else if (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();
};
MobileSketchToolComponent.prototype.ngAfterViewInit = function () {
/*this.gesture = new Gesture(this.element.nativeElement);
this.gesture.listen();
this.gesture.on('pinch', $event => this.pinch($event));*/
};
MobileSketchToolComponent.prototype.ngOnDestroy = function () {
//this.gesture.destroy();
};
Object.defineProperty(MobileSketchToolComponent.prototype, "hasPictograms", {
get: function () {
return !(!this.pictograms);
},
enumerable: true,
configurable: true
});
MobileSketchToolComponent.prototype.addText = function () {
this.disableAllStates();
this.canvasManagerService.addText(this.strokeColor, 'text ');
this.emitCanvas();
};
MobileSketchToolComponent.prototype.addShape = function (shape) {
this.disableAllStates();
this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape[shape]);
this.emitCanvas();
};
MobileSketchToolComponent.prototype.addImage = function (source) {
this.disableAllStates();
this.canvasManagerService.addImage(this.pictogramsPath + source);
this.emitCanvas();
};
MobileSketchToolComponent.prototype.changeStrokeColor = function () {
this.canvasManagerService.changeSelectedObjectsStrokeColor(this.strokeColor);
this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor);
this.emitCanvas();
};
MobileSketchToolComponent.prototype.bringFoward = function () {
this.disableAllStates();
this.canvasManagerService.bringSelectedObjectsToFront();
this.emitCanvas();
};
MobileSketchToolComponent.prototype.sendToBack = function () {
this.disableAllStates();
this.canvasManagerService.sendSelectedObjectsToBack();
this.emitCanvas();
};
MobileSketchToolComponent.prototype.crop = function () {
if (this.isCropping) {
this.disableCroppping();
}
else {
this.disableAllStates();
this.isCropping = true;
this.canvasManagerService.resetZoom();
this.canvasManagerService.disableSelection();
this.canvasManagerService.addSelectionRectangle();
this.isUndoAvailable = true;
this.previousJson = this.canvasManagerService.jsonFromCanvas();
this.emitCanvas();
}
};
MobileSketchToolComponent.prototype.disableCroppping = function () {
this.isCropping = false;
this.canvasManagerService.enableSlection();
this.isUndoAvailable = false;
};
MobileSketchToolComponent.prototype.deleteSelection = function () {
this.disableAllStates();
this.canvasManagerService.deleteSelectedObjects();
this.emitCanvas();
};
MobileSketchToolComponent.prototype.mouseUp = function () {
if (this.isCropping) {
this.isCropping = false;
this.canvasManagerService.cropImage();
this.isUndoAvailable = true;
this.emitCanvas();
}
};
MobileSketchToolComponent.prototype.mouseMove = function (event) {
if (this.isCropping) {
this.canvasManagerService.ajustCropRectangle(event);
}
else if (this.isPanning) {
this.canvasManagerService.panCanvas(event);
}
};
MobileSketchToolComponent.prototype.mouseDown = function (event) {
if (this.isCropping) {
this.canvasManagerService.startSelectingCropRectangle(event);
}
else if (this.isPanning) {
this.canvasManagerService.setLastPanPosition(event);
}
};
MobileSketchToolComponent.prototype.pinch = function (event) {
event.preventDefault();
this.disableDrawing();
this.canvasManagerService.zoom(event);
};
MobileSketchToolComponent.prototype.group = function () {
this.disableAllStates();
this.canvasManagerService.groupSelectedObjects();
this.emitCanvas();
};
MobileSketchToolComponent.prototype.undo = function () {
this.canvasManagerService.loadfromJson(this.previousJson);
this.isUndoAvailable = false;
this.emitCanvas();
};
MobileSketchToolComponent.prototype.onColorClicked = function () {
this.isSelectingColor = true;
this.stopPanning();
};
MobileSketchToolComponent.prototype.onMoveClicked = function () {
this.isPanning = !this.isPanning;
this.disableDrawing();
if (this.isPanning) {
this.canvasManagerService.disableSelection();
}
else {
this.canvasManagerService.enableSlection();
}
};
MobileSketchToolComponent.prototype.disablePanning = function () {
this.isPanning = false;
this.canvasManagerService.enableSlection();
};
MobileSketchToolComponent.prototype.disableAllStates = function () {
this.disableDrawing();
this.disablePanning();
};
MobileSketchToolComponent.prototype.stopPanning = function () {
if (this.isPanning) {
this.isPanning = false;
this.canvasManagerService.enableSlection();
}
};
MobileSketchToolComponent.prototype.setColor = function (color) {
this.strokeColor = color;
this.changeStrokeColor();
this.isSelectingColor = false;
this.emitCanvas();
};
MobileSketchToolComponent.prototype.draw = function () {
this.isDrawing = !this.isDrawing;
this.canvasManagerService.toggleFreeDrawing();
this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor);
if (this.isDrawing) {
this.isPanning = false;
}
};
MobileSketchToolComponent.prototype.disableDrawing = function () {
if (this.isDrawing) {
this.isDrawing = false;
this.canvasManagerService.toggleFreeDrawing();
}
};
MobileSketchToolComponent.prototype.translateShapeButtonsText = function () {
var translationArray = [];
translationArray.push(this.translate.instant('rectangle'));
translationArray.push(this.translate.instant('triangle'));
translationArray.push(this.translate.instant('circle'));
translationArray.push(this.translate.instant('line'));
translationArray.push(this.translate.instant('cross'));
translationArray.push(this.translate.instant('text'));
return translationArray;
};
MobileSketchToolComponent.prototype.presentShapeActionSheet = function () {
return __awaiter(this, void 0, void 0, function () {
var titleText, buttonsText, i, actionSheet;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
this.disableDrawing();
titleText = this.translate.instant('addGeometricShape');
buttonsText = this.translateShapeButtonsText();
i = 0;
return [4 /*yield*/, this.actionSheetCtrl.create({
header: titleText,
buttons: [
{
text: '\uf0c8 ' + buttonsText[i++],
handler: function () {
_this.canvasManagerService.addGeometricShape(_this.strokeColor, _this.fillColor, AvailableGeometricShape.Rectangle);
}
},
{
text: '\uf0d8 ' + buttonsText[i++],
handler: function () {
_this.canvasManagerService.addGeometricShape(_this.strokeColor, _this.fillColor, AvailableGeometricShape.Triangle);
}
},
{
text: '\uf111 ' + buttonsText[i++],
handler: function () {
_this.canvasManagerService.addGeometricShape(_this.strokeColor, _this.fillColor, AvailableGeometricShape.Circle);
}
},
{
text: '\uf068 ' + buttonsText[i++],
handler: function () {
_this.canvasManagerService.addGeometricShape(_this.strokeColor, _this.fillColor, AvailableGeometricShape.Line);
}
},
{
text: '\uf067 ' + buttonsText[i++],
handler: function () {
_this.canvasManagerService.addGeometricShape(_this.strokeColor, _this.fillColor, AvailableGeometricShape.Cross);
}
},
{
text: '\uf031 ' + buttonsText[i++],
handler: function () {
_this.canvasManagerService.addText(_this.strokeColor, '');
}
}
]
})];
case 1:
actionSheet = _a.sent();
return [4 /*yield*/, actionSheet.present()];
case 2:
_a.sent();
return [2 /*return*/];
}
});
});
};
MobileSketchToolComponent.prototype.translateEditButtonsText = function () {
var translationArray = [];
translationArray.push(this.translate.instant('crop'));
translationArray.push(this.translate.instant('group'));
translationArray.push(this.translate.instant('bringToFront'));
translationArray.push(this.translate.instant('sendToBack'));
translationArray.push(this.translate.instant('delete'));
return translationArray;
};
MobileSketchToolComponent.prototype.presentEditActionSheet = function () {
return __awaiter(this, void 0, void 0, function () {
var titleText, buttonsText, i, actionSheet;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
this.disableDrawing();
titleText = this.translate.instant('edition');
buttonsText = this.translateEditButtonsText();
i = 0;
return [4 /*yield*/, this.actionSheetCtrl.create({
header: titleText,
buttons: [
{
text: '\uf125 ' + buttonsText[i++],
handler: function () {
_this.crop();
}
},
{
text: '\uf247 ' + buttonsText[i++],
handler: function () {
_this.group();
}
},
{
text: '\uf0de ' + buttonsText[i++],
handler: function () {
_this.bringFoward();
}
},
{
text: '\uf0dd ' + buttonsText[i++],
handler: function () {
_this.sendToBack();
}
},
{
text: '\uf1f8 ' + buttonsText[i++],
handler: function () {
_this.deleteSelection();
}
}
]
})];
case 1:
actionSheet = _a.sent();
return [4 /*yield*/, actionSheet.present()];
case 2:
_a.sent();
return [2 /*return*/];
}
});
});
};
MobileSketchToolComponent.prototype.presentPictogramsActionSheet = function () {
return __awaiter(this, void 0, void 0, function () {
var buttons, actionSheetStyles, images, _loop_1, this_1, i, titleText, actionSheet;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
this.disableDrawing();
buttons = [];
actionSheetStyles = [];
images = this.pictograms;
_loop_1 = function (i) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML =
'.customCSSClass' +
i +
'{background: url(' +
"'" +
this_1.pictogramsPath +
images[i] +
"'" +
') no-repeat !important;padding-left:50px !important;height:80px; background-position: left center !important;}';
document.getElementsByTagName('head')[0].appendChild(style);
actionSheetStyles.push(style);
buttons.push({
role: 'destructive',
text: images[i],
cssClass: 'customCSSClass' + i,
handler: function () {
_this.addImage(images[i]);
}
});
};
this_1 = this;
for (i = 0; i < images.length; i++) {
_loop_1(i);
}
titleText = this.translate.instant('addPictogram');
return [4 /*yield*/, this.actionSheetCtrl.create({
header: titleText,
buttons: buttons
})];
case 1:
actionSheet = _a.sent();
actionSheet.onDidDismiss().then(function () {
for (var i = 0; i < actionSheetStyles.length; i++) {
if (actionSheetStyles[i].parentNode != null) {
actionSheetStyles[i].parentNode.removeChild(actionSheetStyles[i]);
}
}
});
return [4 /*yield*/, actionSheet.present()];
case 2:
_a.sent();
return [2 /*return*/];
}
});
});
};
MobileSketchToolComponent.prototype.emitCanvas = function () {
this.canvas.emit(this.canvasManagerService.canvas);
};
__decorate([
ViewChild('pinchElement'),
__metadata("design:type", Object)
], MobileSketchToolComponent.prototype, "element", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], MobileSketchToolComponent.prototype, "imageData", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], MobileSketchToolComponent.prototype, "loadedJson", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], MobileSketchToolComponent.prototype, "pictogramsPath", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], MobileSketchToolComponent.prototype, "pictograms", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], MobileSketchToolComponent.prototype, "canvas", void 0);
MobileSketchToolComponent = __decorate([
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 </io