lib-sketch-tool
Version:
## Installing with npm $ npm install --save lib-sketch-tool
1,024 lines (1,011 loc) • 64.9 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('fabric'), require('@ngx-translate/core'), require('@ionic/angular'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('lib-sketch-tool', ['exports', '@angular/core', 'fabric', '@ngx-translate/core', '@ionic/angular', '@angular/common'], factory) :
(global = global || self, factory(global['lib-sketch-tool'] = {}, global.ng.core, global.fabric, global.core$1, global.angular, global.ng.common));
}(this, function (exports, core, fabric, core$1, angular, common) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m) return m.call(o);
return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
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.fabric.Canvas(this.canvasId);
};
CanvasManagerService.prototype.emptyCanvas = function () {
if (this.canvas) {
this.canvas.dispose();
}
this.canvas = new fabric.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.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.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.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.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.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.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.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.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.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.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.fabric.Point(event.touches[0].clientX, event.touches[0].clientY);
};
CanvasManagerService.prototype.panCanvas = function (event) {
var delta = new fabric.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.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.fabric.Point(0, 0), zoom);
this.canvas.absolutePan(new fabric.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.fabric.Point(0, 0), 1);
this.canvas.absolutePan(new fabric.fabric.Point(0, 0));
};
CanvasManagerService = __decorate([
core.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 core.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;